快捷導(dǎo)航

『JavaScript』限制Input只能輸入數(shù)字實(shí)現(xiàn)思路及代碼

更新時(shí)間：2013年04月22日 09:56:38 作者：

一個(gè)文字方塊必須限制只能輸入數(shù)字（或是小數(shù)點(diǎn)）并且要支援 IE 和 Firefox，接下來為大家介紹下如何解決這個(gè)需求

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

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

復(fù)制代碼代碼如下:

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

•其中那個(gè) Style 是在 IE 瀏覽器下有效用的，可以讓使用者無法在這文字方塊內(nèi)使用輸入法。
•而onkeyup 則是我們自己撰寫的 js 啦，完整的 Code 在下面。
--------------------------------------------------------------------------------
驗(yàn)證只能輸入數(shù)字

復(fù)制代碼代碼如下:

 
function ValidateNumber(e, pnumber){ 
if (!/^\d+$/.test(pnumber)){ 
$(e).val(/^\d+/.exec($(e).val())); 
} 
return false; 
} 

demo 是利用 Regex 來將不屬于數(shù)字的過濾掉。
--------------------------------------------------------------------------------
實(shí)務(wù)上經(jīng)常需要驗(yàn)證的是有小數(shù)點(diǎn)的欄位，網(wǎng)路上搜尋到的一堆是可以輸入「1.2.3456」的這種詭異值，其實(shí)只要小改一下 Regex 就可以驗(yàn)證了。

復(fù)制代碼代碼如下:

 
function ValidateFloat(e, pnumber){ 
if (!/^\d+[.]?\d*$/.test(pnumber)){ 
$(e).val(/^\d+[.]?\d*/.exec($(e).val())); 
} 
return false; 
} 

這樣子就可以輸入整數(shù)也可以輸入一個(gè)小數(shù)點(diǎn)
--------------------------------------------------------------------------------
以上就給有需要的朋友使用啦。
因?yàn)橛芯W(wǎng)友說這種玩意兒不需要?jiǎng)佑玫?jQuery 的確，是不用動(dòng)用到所以來寫一下純 javascript 的版本
HTML要有所改變

復(fù)制代碼代碼如下:

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

只能輸入數(shù)字（純 javascript)

復(fù)制代碼代碼如下:

 
function ValidateNumber(e, pnumber){ 
if (!/^\d+$/.test(pnumber)){ 
e.value = /^\d+/.exec(e.value);} 
return false; 
} 

可以輸入小數(shù)（純 javascript)

復(fù)制代碼代碼如下:

 
function ValidateNumber(e, pnumber) 
{ 
if (!/^\d+[.]?\d*$/.test(pnumber)) 
{ 
e.value = /^\d+[.]?\d*/.exec(e.value); 
} 
return false; 
} 

有網(wǎng)友說他想要限制只有小數(shù)點(diǎn)后一位就好，因此再來小改一下其實(shí)重點(diǎn)只有RegExp要改而已

復(fù)制代碼代碼如下:

 
function ValidateFloat2(e, pnumber) 
{ 
if (!/^\d+[.]?[1-9]?$/.test(pnumber)) 
{ 
e.value = /\d+[.]?[1-9]?/.exec(e.value); 
} 
return false; 
} 

如果你是用萬惡的IE那當(dāng)你一開始就輸入非數(shù)字的時(shí)候就會(huì)送你一個(gè)討厭的null因此又要改寫成這樣過濾掉

復(fù)制代碼代碼如下:

 
if (!/^\d+$/.test(pnumber)) 
{ 
var newValue = /^\d+/.exec(e.value); 
if (newValue != null) 
{ 
e.value = newValue; 
} 
else 
{ 
e.value = ""; 
} 
} 
return false; 

您可能感興趣的文章: