亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章

  • 通過(guò)JS獲取用戶本地圖片路徑并顯示的代碼

    通過(guò)JS獲取用戶本地圖片路徑并顯示的代碼

    通過(guò)JS獲取用戶本地圖片路徑并顯示的代碼,多用于本地上傳圖片的預(yù)覽效果
    2012-02-02
  • 關(guān)于JavaScript遞歸經(jīng)典案例題詳析

    關(guān)于JavaScript遞歸經(jīng)典案例題詳析

    遞歸是算法中一個(gè)重要的解法,因此,有必要單拎出來(lái)講講,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript遞歸經(jīng)典案例題的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • js 編程筆記 無(wú)名函數(shù)

    js 編程筆記 無(wú)名函數(shù)

    無(wú)名函數(shù),其中一個(gè)作用可能是生成新的函數(shù)對(duì)象的引用,主要是用于定義。
    2011-06-06
  • javascript中clipboardData對(duì)象用法詳解

    javascript中clipboardData對(duì)象用法詳解

    這篇文章主要介紹了javascript中clipboardData對(duì)象用法,詳細(xì)分析了clipboardData對(duì)象的功能及相關(guān)使用技巧,需要的朋友可以參考下
    2015-05-05
  • ECMAScript6中Set/WeakSet詳解

    ECMAScript6中Set/WeakSet詳解

    這篇文章主要介紹了ECMAScript6中Set/WeakSet詳解的相關(guān)資料,需要的朋友可以參考下
    2015-06-06
  • 簡(jiǎn)單了解微信小程序的目錄結(jié)構(gòu)

    簡(jiǎn)單了解微信小程序的目錄結(jié)構(gòu)

    這篇文章主要介紹了簡(jiǎn)單了解小程序的目錄結(jié)構(gòu),在開(kāi)發(fā)小程序之前,我們首先需要對(duì)其目錄結(jié)構(gòu)進(jìn)行了解,以便于提升開(kāi)發(fā)效率,需要的朋友可以參考下
    2019-07-07
  • Firefox+FireBug使JQuery的學(xué)習(xí)更加輕松愉快

    Firefox+FireBug使JQuery的學(xué)習(xí)更加輕松愉快

    FireBug是FireFox下最強(qiáng)大的調(diào)試插件.利用它,可以讓JQuery的學(xué)習(xí)過(guò)程更加輕松愉快.
    2010-01-01
  • 徹底理解JavaScript的原型與原型鏈

    徹底理解JavaScript的原型與原型鏈

    原型和原型鏈?zhǔn)莏s中的難點(diǎn)也是重點(diǎn),明白了原型和原型鏈會(huì)讓我們?cè)诤竺娌还苁菍W(xué)習(xí)還是工作都會(huì)更加高效,這篇文章主要給大家介紹了關(guān)于JavaScript原型與原型鏈的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • 淺談js數(shù)組和splice的用法

    淺談js數(shù)組和splice的用法

    下面小編就為大家?guī)?lái)一篇淺談js數(shù)組和splice的用法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-12-12
  • IE6彈出“已終止操作”的解決辦法

    IE6彈出“已終止操作”的解決辦法

    導(dǎo)致這個(gè)問(wèn)題產(chǎn)生的原因,一般是因?yàn)閖s(一個(gè)比較復(fù)雜的js)寫(xiě)在body里面,在body元素加載完之前調(diào)用出現(xiàn)問(wèn)題。顯然,解決該問(wèn)題的方法就是將這一段js放在body元素解析完畢之后。
    2010-11-11

最新評(píng)論