当输入框具有新值时，如何更新标签

I am trying to get a label to update when a user enters a value into a text box. I have managed to get the label to update when the slider bar value is changed by the user but i dont have the skill to get it to update when the text box changes.

当用户在文本框中输入值时,我正在尝试更新标签。当用户更改了滑块条值时,我设法让标签更新,但是当文本框改变时我没有技能让它更新。

I tried to write some code but it does not look right at all, can sombody lend me a hand?

我试着写一些代码,但它看起来并不正确,可以让我帮忙吗?

Code i tried

我试过的代码

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

Function to catch change

捕捉变化的功能

$(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();
        });

update function

 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>');
        }

2 个解决方案

#1

To detect a change on a textbox use the following

要检测文本框上的更改,请使用以下命令

http://jsfiddle.net/SrhYh/

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

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

as an alternative listen to keyup

作为替代方案听取密钥

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

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

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

#2

Use the event change or keyup:

使用事件更改或密钥:

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

Without HTML code, I guessed your input was something like <input type="text" id="mytextinput" />, but if it is not you should give more information.

没有HTML代码,我猜测你的输入类似于,但如果不是,你应该提供更多信息。

#1