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

我是Web开发的新手,尝试应用相当简单的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

解决方法:

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

$("#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); 
});