將錯誤的javascript行爲應用於html5數字字段

Question

我是新來的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

Answer 1

即使輸入類型是數字，從.val（）返回的值的類型也是一個字符串。要解決此問題，請使用Number(f1_)和Number(f2_)將其轉換回數字。 Here是一個小提琴。在轉換前請參閱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); 
}); 

Answer 2

我喜歡把+符號在一個字符串的前面將其轉換爲數字。看到下面的修復：http://jsfiddle.net/fXnFF/531/