DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 『JavaScript』限制Input只能輸入數字實現思路及代碼
『JavaScript』限制Input只能輸入數字實現思路及代碼
編輯:關於JavaScript     
這玩意很多人寫過,但是今天臨時要用的時候找不到符合需求的,所以立馬來寫一個,既然都寫完了而且還滿符合需求的就放上來讓大家鞭一鞭。

需求很簡單,一個文字方塊必須限制只能輸入數字(或是小數點)並且要支援 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;
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved