很多時候需要用到限制文本框的數字輸入，試過許多方法，都不太理想，遂決定自己實現一個來玩玩。
曾經使用過的方法 通過onkeydown事件來控制只允許數字：
復制代碼 代碼如下:
<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事件控制起來相對比較麻煩，上面的簡化版很多鍵都沒有涉及到，操作體驗比較糟糕。
jQuery的兩個插件使用起來還是比較靈活的，能夠滿足大部分需要，但是在控制輸入長度上限制的很不靈活(或許是我沒有發現靈活的使用方式？)
具體實現方法 使用maskedInput裡的一部分方法來提取光標位置
使用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
然後再自定義兩個屬性來設置輸入的數字、小數長度：
•data-numbers控制數字輸入的長度
•data-decimals控制小數輸入的長度
最終全部代碼實現如下：
復制代碼 代碼如下:
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, 四個方向鍵
key >= 35 && key <= 40) {
return;
}
if (e.shiftKey || e.altKey || e.ctrlKey) {
return false;
}
var el = e.target || e.srcElement,
// 最大數字長度
nl = el.getAttribute("data-numbers") || 15,
// 最大小數長度
dl = el.getAttribute("data-decimals") || 2,
val = el.value,
// "." 位置
dotIndex = val.indexOf("."),
rng = caret.call(el),
// 光標在"."左邊
rLeft = rng.end <= dotIndex,
// 光標在"."右邊
rRight = rng.begin > dotIndex;
if (
// 數字
key >= 48 && key <= 57 ||
// 數字鍵盤輸入的數字
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*/ ||
// 數字鍵盤上的 ".", ","
key == 110/*|| key == 109*/) &&
// 允許輸入小數
dl > 0) {
if (
// 未輸入".", 且輸入的位置後面的小數位數未達到上限
dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) ||
// 輸過".", 且選中部分文本包含"."
dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end)
return;
}
return false;
}
// 驗證輸入的值
function validateValue(dotIndex, val, rLeft, rRight, nl, dl) {
if (
// 未輸入過"."
dotIndex == -1 && val.length < nl ||
// 光標位置在"."之前
rLeft && val.substring(0, dotIndex).length < nl ||
// 光標在"."之後且未達到小數上限
rRight && val.substring(dotIndex + 1).length < dl)
return true;
return false;
}
// 獲取光標位置
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 };
}
使用方法 具體使用方法如下：
復制代碼 代碼如下:
<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裡：
復制代碼 代碼如下:
<input type="text" id="lwme_text_3" onkeydown="return validateDigitsOnly(event)" />
如果引入jQuery的話使用起來就更加簡單了：
復制代碼 代碼如下:
<input type="text" class="digitsOnly" />
復制代碼 代碼如下:
$(".digitsOnly").keydown(validateDigitsOnly);
結尾 這個方法雖然有些地方效率還不夠高，而且某些鍵盤key的還未處理，也不排除某些情況下可能失效，但是對於大多數情況下使用已經足夠了。
大家若有額外需要請自行修改，當然有更好的辦法也請分享(*^__^*)
over
PS:01.18更新了一些keyCode的判斷,以及錯把110寫成109≡(▔﹏▔)≡
另外需要注意：對於使用右鍵菜單或者是菜單欄粘貼進來的需要額外處理；
還有一種極端的情況：在網頁中選中文字並拖動到文本框內，或者是在文本框中選中文字並拖動，這都需要做額外處理 對於以上兩種需要額外處理的情況，比較便捷的方法是加一個驗證，比如jQuery.validate之類的表單驗證，否則處理起來比較麻煩
再PS：在win8下，切換到微軟拼音可能會造成無法輸入，不知道其他系統或者其他輸入法有沒有這個問題( *_*) (`~~`) ====