快捷導(dǎo)航

javascript限制文本框只允許輸入數(shù)字(曾經(jīng)與現(xiàn)在的方法對比)

更新時(shí)間：2013年01月18日 16:21:14 作者：

很多時(shí)候需要用到限制文本框的數(shù)字輸入，試過許多方法，都不太理想，遂決定自己實(shí)現(xiàn)一個(gè)來玩玩,接下來介紹曾經(jīng)使用過的方法與自定義方法的對比，感興趣的朋友可以了解下啊

很多時(shí)候需要用到限制文本框的數(shù)字輸入，試過許多方法，都不太理想，遂決定自己實(shí)現(xiàn)一個(gè)來玩玩。

曾經(jīng)使用過的方法
通過onkeydown事件來控制只允許數(shù)字：

 
<input onkeydown="return event.keyCode>=48&&event.keyCode<=57||event.keyCode>=96&&event.keyCode<=105" /> 

通過jQuery插件Masked Input：http://digitalbush.com/projects/masked-input-plugin/
通過jQuery插件MeioMask：https://github.com/fabiomcosta/jquery-meiomask
onkeydown事件控制起來相對比較麻煩，上面的簡化版很多鍵都沒有涉及到，操作體驗(yàn)比較糟糕。
jQuery的兩個(gè)插件使用起來還是比較靈活的，能夠滿足大部分需要，但是在控制輸入長度上限制的很不靈活(或許是我沒有發(fā)現(xiàn)靈活的使用方式？)

具體實(shí)現(xiàn)方法
使用maskedInput里的一部分方法來提取光標(biāo)位置
使用stackoverflow上提供的通用方法來處理鍵盤的敲擊：http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input
更新：參考http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes上列出的keycode
然后再自定義兩個(gè)屬性來設(shè)置輸入的數(shù)字、小數(shù)長度：
•data-numbers控制數(shù)字輸入的長度
•data-decimals控制小數(shù)輸入的長度
最終全部代碼實(shí)現(xiàn)如下：

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

 
function validateDigitsOnly(evt) { 
var e = evt || window.event, 
key = e.keyCode || e.which; 
if ( 
// Backspace, Tab, Enter, Esc, Delete 
key == 8 || key == 9 || key == 13 || key == 27 || key == 46 || 
// Ctrl + A 
(key == 65 && event.ctrlKey === true) || 
// Home, End, 四個(gè)方向鍵 
key >= 35 && key <= 40) { 
return; 
} 
if (e.shiftKey || e.altKey || e.ctrlKey) { 
return false; 
} 
var el = e.target || e.srcElement, 
// 最大數(shù)字長度 
nl = el.getAttribute("data-numbers") || 15, 
// 最大小數(shù)長度 
dl = el.getAttribute("data-decimals") || 2, 
val = el.value, 
// "." 位置 
dotIndex = val.indexOf("."), 
rng = caret.call(el), 
// 光標(biāo)在"."左邊 
rLeft = rng.end <= dotIndex, 
// 光標(biāo)在"."右邊 
rRight = rng.begin > dotIndex; 
if ( 
// 數(shù)字 
key >= 48 && key <= 57 || 
// 數(shù)字鍵盤輸入的數(shù)字 
key >= 96 && key <= 105) { 
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl)) 
return; 
// 選中部分文本再做一次處理 
val = val.substring(0, rng.begin) + val.substring(rng.end); 
dotIndex = val.indexOf("."); 
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl)) 
return; 
} 
else if ( 
// ".", "," 
(key == 190 /*|| key == 188*/ || 
// 數(shù)字鍵盤上的 ".", "," 
key == 110/*|| key == 109*/) && 
// 允許輸入小數(shù) 
dl > 0) { 
if ( 
// 未輸入".", 且輸入的位置后面的小數(shù)位數(shù)未達(dá)到上限 
dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) || 
// 輸過".", 且選中部分文本包含"." 
dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end) 
return; 
} 
return false; 
} 
// 驗(yàn)證輸入的值 
function validateValue(dotIndex, val, rLeft, rRight, nl, dl) { 
if ( 
// 未輸入過"." 
dotIndex == -1 && val.length < nl || 
// 光標(biāo)位置在"."之前 
rLeft && val.substring(0, dotIndex).length < nl || 
// 光標(biāo)在"."之后且未達(dá)到小數(shù)上限 
rRight && val.substring(dotIndex + 1).length < dl) 
return true; 
return false; 
} 
// 獲取光標(biāo)位置 
function caret() { 
var begin, end; 
if (this.setSelectionRange) { 
begin = this.selectionStart; 
end = this.selectionEnd; 
} else if (document.selection && document.selection.createRange) { 
var range = document.selection.createRange(); 
begin = 0 - range.duplicate().moveStart('character', -100000); 
end = begin + range.text.length; 
} 
return { begin: begin, end: end }; 
} 

使用方法
具體使用方法如下：

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

 
<input type="text" id="t1" /> 
<input type="text" id="t2" data-numbers="5" data-decimals="4" /> 
<script> 
document.getElementById("t1").onkeydown = validateDigitsOnly; 
document.getElementById("t2").onkeydown = validateDigitsOnly; 
</script> 

或者干脆寫在html里：

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

 
<input type="text" id="lwme_text_3" onkeydown="return validateDigitsOnly(event)" /> 

如果引入jQuery的話使用起來就更加簡單了：

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

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

$(".digitsOnly").keydown(validateDigitsOnly);

結(jié)尾
這個(gè)方法雖然有些地方效率還不夠高，而且某些鍵盤key的還未處理，也不排除某些情況下可能失效，但是對于大多數(shù)情況下使用已經(jīng)足夠了。
大家若有額外需要請自行修改，當(dāng)然有更好的辦法也請分享(*^__^*)
over
PS:01.18更新了一些keyCode的判斷,以及錯(cuò)把110寫成109≡(▔﹏▔)≡
另外需要注意：對于使用右鍵菜單或者是菜單欄粘貼進(jìn)來的需要額外處理；
還有一種極端的情況：在網(wǎng)頁中選中文字并拖動到文本框內(nèi)，或者是在文本框中選中文字并拖動，這都需要做額外處理
對于以上兩種需要額外處理的情況，比較便捷的方法是加一個(gè)驗(yàn)證，比如jQuery.validate之類的表單驗(yàn)證，否則處理起來比較麻煩
再PS：在win8下，切換到微軟拼音可能會造成無法輸入，不知道其他系統(tǒng)或者其他輸入法有沒有這個(gè)問題( *_*) (`~~`) ====

您可能感興趣的文章: