javascript - 应用于 html5 数字字段的 javascript 的错误行为

Question

我是网络开发的新手，在尝试应用相当简单的 javascript 代码时遇到错误。假设我们有两个数字 html5 字段:

<label for="f1">First field</label>
            <input type="number" name="f1" id="f1" min="0" step="1" value="100"/>

<label for="f2">Second field</label>
            <input type="number" name="f2" id="f2" min="0" step="1" value="100"/>

现在我想为这些字段应用两个简单的规则。

当第一个字段的值改变时，这个值(从第一个字段)设置到第二个字段:

$("#f1").bind("change paste keyup", function()  {
    $("#f2").val($("#f1").val());  });

这很有效。

第二个字段的值不能超过第一个字段的值:

$("#f2").bind("change paste keyup", function()  {
    var f1_ = $("#f1").val();
    var f2_ = $("#f2").val();
    var f2_new = (f2_ > f1_)? f1_ : f2_;
    $("#f2").val(f2_new);  });

它适用于一些错误 - 当第二个字段的值为 10、100、1000、10000 时，...，并且我尝试减小它，新值变得等于第一个字段的值。 See example here

Answer 1

即使输入类型是数字，.val() 返回值的类型也是字符串。要解决此问题，只需使用 Number(f1_) 和 Number(f2_) 转换回数字。 Here是一个 fiddle 。看到在转换之前，console.log(typeof f1_) 行记录 string。

$("#f1").bind("change paste keyup", function() 
{
    $("#f2").val($("#f1").val()); 
});

$("#f2").bind("change paste keyup", function() 
{
    var f1_ = $("#f1").val();
    var f2_ = $("#f2").val();
    console.log( typeof f1_ );
    var f2_new = (Number(f2_) > Number(f1_))? f1_ : f2_;
    $("#f2").val(f2_new); 
});