『JavaScript』如何限制 Input 只能输入数字

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

需求很簡單，一個文字方塊必須限制只能輸入數字（或是小數點）並且要支援 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;