最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時(shí)間:2013年01月18日 16:21:14   作者:  
很多時(shí)候需要用到限制文本框的數(shù)字輸入,試過(guò)許多方法,都不太理想,遂決定自己實(shí)現(xiàn)一個(gè)來(lái)玩玩,接下來(lái)介紹曾經(jīng)使用過(guò)的方法與自定義方法的對(duì)比,感興趣的朋友可以了解下啊
很多時(shí)候需要用到限制文本框的數(shù)字輸入,試過(guò)許多方法,都不太理想,遂決定自己實(shí)現(xiàn)一個(gè)來(lái)玩玩。

曾經(jīng)使用過(guò)的方法

通過(guò)onkeydown事件來(lái)控制只允許數(shù)字:
復(fù)制代碼 代碼如下:

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

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

具體實(shí)現(xiàn)方法
使用maskedInput里的一部分方法來(lái)提取光標(biāo)位置
使用stackoverflow上提供的通用方法來(lái)處理鍵盤(pán)的敲擊: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è)屬性來(lái)設(shè)置輸入的數(shù)字、小數(shù)長(zhǎng)度:
•data-numbers控制數(shù)字輸入的長(zhǎng)度
•data-decimals控制小數(shù)輸入的長(zhǎng)度
最終全部代碼實(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ù)字長(zhǎng)度
nl = el.getAttribute("data-numbers") || 15,
// 最大小數(shù)長(zhǎng)度
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ù)字鍵盤(pán)輸入的數(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ù)字鍵盤(pán)上的 ".", ","
key == 110/*|| key == 109*/) &&
// 允許輸入小數(shù)
dl > 0) {
if (
// 未輸入".", 且輸入的位置后面的小數(shù)位數(shù)未達(dá)到上限
dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) ||
// 輸過(guò)".", 且選中部分文本包含"."
dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end)
return;
}
return false;
}
// 驗(yàn)證輸入的值
function validateValue(dotIndex, val, rLeft, rRight, nl, dl) {
if (
// 未輸入過(guò)"."
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>

或者干脆寫(xiě)在html里:
復(fù)制代碼 代碼如下:

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

如果引入jQuery的話使用起來(lái)就更加簡(jiǎn)單了:
復(fù)制代碼 代碼如下:

<input type="text" class="digitsOnly" />

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

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

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

相關(guān)文章

最新評(píng)論

灌阳县| 荔波县| 化隆| 开封市| 上饶市| 马鞍山市| 普定县| 九寨沟县| 奉化市| 柘荣县| 登封市| 新兴县| 新田县| 叙永县| 沅江市| 长沙市| 承德县| 富裕县| 重庆市| 青田县| 巩留县| 漯河市| 根河市| 八宿县| 磐安县| 孟州市| 鄯善县| 平和县| 长阳| 海原县| 大石桥市| 永兴县| 日土县| 承德市| 巴里| 星子县| 江川县| 科尔| 贵德县| 唐山市| 泾阳县|