使用jQuery .val()无法获取number类型输入框的值问题求助

嘿，你这代码的问题很明显——页面刚加载完你就急着去拿输入框的值，这时候用户还没来得及输入任何内容呢，控制台当然输出空啦！而且你没给输入框加事件监听，就算后面用户输入了，代码也不会重新去取值输出。

给你两种修正方案，按需选： #

方案1：实时获取用户输入（边输边输出） #

这种适合需要实时响应的场景，用户每敲一个字符，控制台就会输出当前值：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="a" type="number">

<script>
$(document).ready(function() {
    // 监听输入框的input事件，实时触发
    $("#a").on("input", function() {
        var num = $(this).val();
        console.log("当前输入值：", num);
    });
});
</script>

方案2：用户输入完成后获取（失去焦点时输出） #

如果只需要在用户输入完、点击输入框外面的时候才获取值，就用change事件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="a" type="number">

<script>
$(document).ready(function() {
    // 监听输入框的change事件，失去焦点且内容变化时触发
    $("#a").on("change", function() {
        var num = $(this).val();
        console.log("输入完成的值：", num);
    });
});
</script>

小提示 #

• 用$(this)代替重复的$("#a")，代码更简洁，也避免重复查找DOM元素
• 如果确实需要页面加载时获取初始值（哪怕是空），可以在ready函数里直接加一行console.log($("#a").val())，但这时候肯定是空的哦

内容的提问来源于stack exchange，提问作者Trần Trung Nghĩa