获取jQuery格式的输入数的值

Question

我正在处理一个表单，我想实时获取类型为number的输入字段的当前值，如下所示：

​

$(":input").bind('keyup mouseup', function () {
  var coins = $("#coins").val();
  $("#reward").text(coins);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="coins" type="number" name="coins" value="1" max="999" min="1">

<p id="potential">Potential reward : <b id="reward"></b></p>

​

但是当我运行它的时候什么也没有发生。它说硬币的价值是空的。我不知道我做错了什么。有人能帮上忙吗？

Answer 1

您可以使用以下内容：

$(document).on('input', '#coin', function(){
    var coins = $("#coins").val();
    $("#reward").text(coins);
})

Answer 2

当用户进行编辑时，显示的代码工作正常。

如果需要在页面加载时显示它，只需触发其中一个事件

​

$(":input").on('keyup mouseup', function () {
  var coins = $("#coins").val();
  $("#reward").text(coins);
}).trigger('mouseup');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="coins" type="number" name="coins" value="1" max="999" min="1">

<p id="potential">Potential reward : <b id="reward"></b></p>

​

请注意，为了支持使用on()，bind()已弃用