JQuery中input文本框值变更后alert仍显示旧值问题求助

你设置了一个input文本框，想验证alert能否获取到更新后的值，但修改文本框内容后，alert始终显示旧值。相关代码如下：

原代码 #

JavaScript #

$('#spnFiberLeadLITActual').keyup(function (evt) {
        var neValue = parseFloat($('#spnFiberLeadSpanLength').text());
        var completeValue = $('#spnFiberLeadLITAccepted').text();       

        alert(completeValue); // show the old value not the new value inserted in textbox

    });

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td width="20%"><input type="text" class="text-center" id="spnFiberLeadLITActual" onkeypress="return isNumberKey(event, this)" /></td>

问题原因 #

1. 元素选择错误：你监听的是#spnFiberLeadLITActual这个input框，但代码里尝试获取值的是#spnFiberLeadLITAccepted——而你的HTML中根本不存在这个ID的元素，自然拿不到正确的输入值。
2. 取值方法错误：即便选择了正确的input元素，用text()方法也无法获取输入值。text()用于获取div、span这类非表单元素的文本内容，input的输入值需要用val()方法读取。

修正方案 #

要获取当前输入框的实时值，需要修改两处：

• 选择正确的input元素ID
• 使用val()方法获取输入值

修正后的JavaScript代码 #

$('#spnFiberLeadLITActual').keyup(function (evt) {
    // 获取当前输入框的实时值
    var completeValue = $('#spnFiberLeadLITActual').val();       
    alert(completeValue); // 现在会显示更新后的输入值
});

补充说明 #

如果你的业务逻辑中确实需要获取#spnFiberLeadLITAccepted或#spnFiberLeadSpanLength的值，需要先确保HTML中存在对应的元素，并且根据元素类型选择正确的取值方法：

• 表单元素（input、select、textarea）用val()
• 普通元素（div、span、td）用text()或html()

内容的提问来源于stack exchange，提问作者Nadeem