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

我是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 等时，我尝试减小它，新值将等于第一个字段的值。在此处查看示例

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