jquery - How do I get the text value entered by a user inside the input text box element?

Question

I have a text box with a default value when the page is loaded:

<input id="txtYear" type="text" value="2013" />

After the page is loaded, the user can input something else into the text box, e.g. 2014.

When I try to do this:

var year = $("#txtYear").val();

The value is still 2013 even though the user changed the text to 2014.

How do I get the value the user input in this case?

Answer 1

将更改事件绑定到文本框。

您看到这种情况发生的原因是因为在用户键入新年时代码已经执行。

$('#txtYear').on('change', function () {
    var year = $("#txtYear").val();
    console.log(year)
}).change();

重构

   var $year = $('#txtYear');
    $year.on('change', function () {
        var year = this.value;
        console.log(year)
    }).change();

Answer 2

上面的答案确实有技巧，但是如果您查看 html 源代码中的值，它仍然与加载时间相同，即“2013”

var year = $("#txtYear").val();

$("#txtYear").on("change",function(){
    year = $(this).val()
    $(this).attr("value",year);
    alert(year);
});

alert(year);

在这里工作小提琴：http: //jsfiddle.net/wDtRt/