哪種方法可以過濾文本字段的數值？

我正在處理一種不允許輸入數字值以外的驗證類型的文本框。由於這樣，我最初的代碼看起來很簡單，與此類似：哪種方法可以過濾文本字段的數值？

$(textField).onKeyPress(function(e) { 
    if (e.which < 48 && e.which > 57) 
     e.preventDefault(); 
});

這是相當strightforward，但原來是（在最新版本的所有瀏覽器），Firefox將會使這也避免使用箭頭鍵移動和刪除/退格鍵，而其他瀏覽器則不會。

環顧四周，我發現我還需要檢查這些鍵，並檢查在e事件參考中公開的不同屬性。

我的最終代碼看起來是這樣的：

$(textField).onKeyPress(function(e) { 
    var code = e.which || e.keyCode; 
    if (code > 31 // is not a control key 
     && (code < 37 || code > 40) // is not an arrow key 
     && (code < 48 || code > 57) // is not numeric 
     && (code != 46) // is not the delete key 
    ) 
     e.preventDefault(); 
});

然而，這種感覺是太多解決一個相當簡單的問題，只是防止非數字。

我在做什麼錯？就這種驗證而言，哪種是最佳做法？

來源

2012-06-02 Alpha

如果用戶將非數字文本複製並粘貼到輸入框中，您是否在意？小數和負數怎麼樣？你允許那些嗎？ –

@RayCheng好點。同樣關注這些情況也是非常好的，所以我看到提供的keyUp解決方案具有價值。我很驚訝地發現沒有人使用keyPress方法 - 這對我來說似乎更加自然。小數和負數可以從這種方法中拿出來，我允許的字符範圍是明顯的數字（0-9）。 – Alpha

如果您使用'keypress'或'keydown'，可能會有副作用，因爲如果用戶按住該鍵，則重複該事件並且代碼被多次調用。 'keyup'只執行一次。 –

我們將響應按鍵和模糊事件。當有人按下某個鍵時，我們檢查輸入的鍵是否是一個數字。如果是，我們允許。否則，我們阻止它。

如果該字段模糊，我們刪除任何非數字值以及後面的所有值。這將防止粘貼用戶在非數字字符串：

$("#textfield").on("keypress blur", function(e){ 
    if (e.type === "keypress") 
     return !!String.fromCharCode(e.which).match(/^\d$/); 
    this.value = this.value.replace(/[^\d].+/, ""); 
});

演示：http://jsfiddle.net/jonathansampson/S7VhV/5/

來源

2012-06-02 22:38:20 Sampson

謝謝！這不會看起來「跳動」給用戶嗎？ – Alpha

沒錯。不要搗鼓事件，只是在事後調整結果。 – tdammers

@Alpha你說得對。我已經採取了上述另一種方法，並且正在爲複製/粘貼數字的人員提供解決方案。 – Sampson

工作演示http://jsfiddle.net/Pb2eR/23/更新複製/粘貼演示：http://jsfiddle.net/Pb2eR/47/（在此演示機智你複製粘貼的字符串與字符它不會允許其他它將允許數字被複制粘貼：在safari測試）

演示爲箭頭鍵工作http://jsfiddle.net/gpAUf/

這會幫助你。

注意：即使你複製粘貼，將其設置爲空的輸入框，在野生動物園的獅子測試這個版本的OSX :)

很好的鏈接：[1] How to allow only numeric (0-9) in HTML inputbox using jQuery?

代碼

$(".hulk").keyup(function(){  
    this.value = this.value.replace(/[^0-9\.]/g,'');  
});

HTML

<input type="text" class="hulk" value="" />

更新複製粘貼東西

$(".hulk").keyup(function(){ 

    this.value = this.value.replace(/[^0-9\.]/g,''); 

}); 

$(".hulk").bind('input propertychange', function() { 

    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

代碼從另一個演示

$(".hulk").bind('input propertychange', function(event) { 
     if(!(event.keyCode == 8 // backspace 
     || event.keyCode == 46  // delete 
     || (event.keyCode >= 35 && event.keyCode <= 40)  // arrow keys/home/end 
     || (event.keyCode >= 48 && event.keyCode <= 57)  // numbers on keyboard 
     || (event.keyCode >= 96 && event.keyCode <= 105)) // number on keypad 
     ) { 
      event.preventDefault();  // Prevent character input 
    } 
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

來源

2012-06-02 22:52:39

如何複製和粘貼鼠標？ –

我在FF12和IE9上。當我複製並粘貼鼠標時，您的代碼不會執行。另外，用戶如何輸入「-1.2.3.4」？ –

@RayCheng酷得到你，看到我的更新上面，你可以通過使用'propertyChnage'簡單的方式。 –

-1

這將使雙方INT。如果用戶使用鼠標複製並粘貼，它也會刪除文本。

$(document).ready(function() { 
    $('#textfield').bind('keyup blur', function (e) { 
     if (e.type == 'keyup') { 
      if (parseInt($(this).val()) != $(this).val()) { 
       $(this).val($(this).val().slice(0, $(this).val().length - 1)); 
      } 
     } else if (e.type == 'blur') { 
      $(this).val(''); 
     } 
    }); 
});

來源

2012-06-02 23:00:33

@downvoter，我的答案有什麼問題？ –

哪種方法可以過濾文本字段的數值？

回答

相關問題