Как обновить метку, когда поле ввода имеет новое значение

Question

Как обновить метку, когда поле ввода имеет новое значение

0

Я пытаюсь получить метку для обновления, когда пользователь вводит значение в текстовое поле. Мне удалось получить ярлык для обновления, когда пользовательское значение слайдера изменилось, но у меня нет навыков, чтобы он обновлялся при изменении текстового поля.

Я попытался написать какой-то код, но он выглядит совсем не так, может ли кто-нибудь протянуть мне руку?

Код, который я пытался

  $("#MonthlyRent").text({
                textchange: function (event, ui) {
                    update(2, ui.value + '%'); //changed
                }
            });

Функция для улавливания изменений

$(document).ready(function () {
            $("#slider").slider({
                range: "min",
                animate: true,
                value: 1,
                min: 0,
                max: 100,
                step: 1,
                slide: function (event, ui) {
                    update(1, ui.value + '%'); //changed
                }
            });

            $("#slider2").slider({
                range: "min",
                animate: true,
                value: 1,
                min: 0,
                max: 100,
                step: 1,
                slide: function (event, ui) {
                    update(2, ui.value + '%'); //changed
                }
            });

            $("#MonthlyRent").text({
                slide: function (event, ui) {
                    update(2, ui.value + '%'); //changed
                }
            });

            //Added, set initial value.
            $("#amount").val(0);
            $("#duration").val(0);
            $("#amount-label").text(0);
            $("#duration-label").text(0);
            $("MonthlyRent").text(0);
            update();
        });

функция обновления

 function update(slider, val) {
            //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
            var $amount = slider == 1 ? val : $("#amount").val();
            var $duration = slider == 2 ? val : $("#duration").val();
            var $rent = $("#MonthlyRent").val();
            var $amount2 = $amount.replace('%', '');

            /* commented
            $amount = $( "#slider" ).slider( "value" );
            $duration = $( "#slider2" ).slider( "value" );
             */
            $total = "£" + ($amount2 + $rent);
            $("#amount").val($amount);
            $("#amount-label").text($amount);
            $("#duration").val($duration);
            $("#duration-label").text($duration);
            $("#total").val($total);
            $("#total-label").text($total);

            $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
            $('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $duration + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
        }

user3545323 17 апр. 2014, в 16:06

Источник

2

java - это javascript, как ветчина - это хомяк, это не имеет ничего общего с javascript
AbstractChaos 17 апр. 2014, в 13:29
0

извини я имел ввиду jquery
user3545323 17 апр. 2014, в 13:30

Теги:

javascript

html

asp.net

2 ответа

1

Используйте изменение или активацию события:

$('#mytextinput').on('change keyup', function (e) { /* You stuff here. */ })

Без HTML-кода я догадался, что ваш ввод был чем-то вроде <input type="text" id="mytextinput"/>, но если это не так, вы должны дать больше информации.

Holt 17 апр. 2014, в 11:49

Ещё вопросы

java - это javascript, как ветчина - это хомяк, это не имеет ничего общего с javascript

AbstractChaos · Accepted Answer · 2014-04-17T10-38-00.000Z

Чтобы обнаружить изменения в текстовом поле, используйте следующие

http://jsfiddle.net/SrhYh/

$('#example').change(function() {
    update();
});

function update() {
    $('#result').text($('#example').val());
}

в качестве альтернативы слушайте клавиатуру

$('#example').keyup(function() {
    update();
});

function update() {
    $('#result').text($('#example').val());
}

http://jsfiddle.net/SrhYh/1/

Событие изменения запускается (по крайней мере, в Chrome v34), когда вы копируете / вставляете или покидаете ввод. Если вы хотите обновить, как только пользователь введет, вы должны использовать событие keyup / keydown.
@holt Я знаю, пожалуйста, посмотрите мое обновление :), и, согласно вашему ответу, его можно объединить в .on() хотя я считаю, что метод изменения избыточен при наличии keyup
Спасибо! я задавался вопросом, что делает keyup, ха-ха ... теперь я знаю: D