『JavaScript』限制Input只能輸入數位實現思路及程式碼_javascript技巧

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

需求很簡單，一個文字方塊必須限制只能輸入數字（或是小數點）並且要支援 IE 和 Firefox。
HTML的Input 是這樣下滴

複製程式碼 程式碼如下:

•其中那個Style 是在IE 瀏覽器下有效用的，可以讓使用者無法在這文字方塊內使用輸入法。
•而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 (!/^d [.]?d*$/.test(pnumber)){

$(e).val(/^d [.]?d*/.exec($(e).val( )));

}
return false;
}


這樣子就可以輸入整數也可以輸入一個小數點
--------- -------------------------------------------------- ---------------------
以上就給有需要的朋友使用啦。

因為有網友說這種玩意兒不需要動用到jQuery 的確，是不用動用到所以來寫一下純javascript 的版本
HTML要有所改變




複製程式碼

程式碼如下:

只能輸入數字（純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 $/.testpnumberumber)) {

var newValue = /^d /.exec(e.value);

if (newValue != null)
{
e.value = newValue;
}
else
{
e.value = "";
}
}
return false;