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

2019-11-20 22:47:24

字體：大中小

來源：轉載

供稿：網友

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

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

復制代碼代碼如下:

 
<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),value)" /> 

•其中那個 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, 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; 