『JavaScript』限制Input只能輸入數字實現思路及代碼

這玩意很多人寫過，但是今天臨時要用的時候找不到符合需求的，所以立馬來寫一個，既然都寫完了而且還滿符合需求的就放上來讓大家鞭一鞭。

需求很簡單，一個文字方塊必須限制只能輸入數字（或是小數點）並且要支援 IE 和 Firefox。
HTML的 Input 是這樣下滴 複製代碼 代碼如下:<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),value)" />

•其中那個 Style 是在 IE 瀏覽器下有效用的，可以讓使用者無法在這文字方塊內使用IME。
•而onkeyup 則是我們自己撰寫的 js 啦，完整的 Code 在下面。
--------------------------------------------------------------------------------
驗證只能輸入數字 複製代碼 代碼如下:function ValidateNumber(e, pnumber){
if (!/^\d+$/.test(pnumber)){
$(e).val(/^\d+/.exec($(e).val()));
}
return false;
}

demo 是利用 Regex 來將不屬於數位過濾掉。
--------------------------------------------------------------------------------
實務上經常需要驗證的是有小數點的欄位，網路上搜尋到的一堆是可以輸入「1.2.3456」的這種詭異值，其實只要小改一下 Regex 就可以驗證了。 複製代碼 代碼如下:function ValidateFloat(e, pnumber){
if (!/^\d+[.]?\d*$/.test(pnumber)){
$(e).val(/^\d+[.]?\d*/.exec($(e).val()));
}
return false;
}

這樣子就可以輸入整數也可以輸入一個小數點
--------------------------------------------------------------------------------
以上就給有需要的朋友使用啦。
因為有網友說這種玩意兒不需要動用到 jQuery 的確，是不用動用到所以來寫一下 純 javascript 的版本
HTML要有所改變 複製代碼 代碼如下:<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber(this,value)" />

只能輸入數字（純 javascript) 複製代碼 代碼如下:function ValidateNumber(e, pnumber){
if (!/^\d+$/.test(pnumber)){
e.value = /^\d+/.exec(e.value);}
return false;
}

可以輸入小數（純 javascript) 複製代碼 代碼如下:function ValidateNumber(e, pnumber)
{
if (!/^\d+[.]?\d*$/.test(pnumber))
{
e.value = /^\d+[.]?\d*/.exec(e.value);
}
return false;
}

有網友說他想要限制只有小數點後一位就好，因此再來小改一下其實重點只有RegExp要改而已 複製代碼 代碼如下:function ValidateFloat2(e, pnumber)
{
if (!/^\d+[.]?[1-9]?$/.test(pnumber))
{
e.value = /\d+[.]?[1-9]?/.exec(e.value);
}
return false;
}

如果你是用萬惡的IE那當你一開始就輸入非數位時候就會送你一個討厭的null因此又要改寫成這樣過濾掉 複製代碼 代碼如下:if (!/^\d+$/.test(pnumber))
{
var newValue = /^\d+/.exec(e.value);
if (newValue != null)
{
e.value = newValue;
}
else
{
e.value = "";
}
}
return false;