最新资讯当前位置:万彩娱乐平台 > 最新资讯 > >

javascript限制文本框只允许输入数字(曾经与现在的

  

[文本框,输入数字]javascript限制文本框只允许输入数字(曾经与现在的方法对比)

  很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩。

  
  
曾经使用过的方法
  
通过onkeydown事件来控制只允许数字:  
代码如下:

  
  
  
通过jQuery插件Masked Input:  
通过jQuery插件MeioMask:  
onkeydown事件控制起来相对比较麻烦,上面的简化版很多键都没有涉及到,操作体验比较糟糕。

  
jQuery的两个插件使用起来还是比较灵活的,能够满足大部分需要,但是在控制输入长度上限制的很不灵活(或许是我没有发现灵活的使用方式?)  
  
具体实现方法  
使用maskedInput里的一部分方法来提取光标位置  
使用stackoverflow上提供的通用方法来处理键盘的敲击:  
更新:参考上列出的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 };  
}  
  
使用方法  
具体使用方法如下万彩娱乐注册:  
代码如下:
  
  
  
  
document.getElementById("t1").onkeydown = validateDigitsOnly;  
document.getElementById("t2").onkeydown = validateDigitsOnly;  
  
  
或者干脆写在html里:  
代码如下:
  
  
  
如果引入jQuery的话使用起来就更加简单了:  
代码如下:
  
  
  
代码如下:
  
$(".digitsOnly").keydown(validateDigitsOnly);  
  
结尾  
这个方法虽然有些地方效率还不够高,而且某些键盘key的还未处理,也不排除某些情况下可能失效,但是对于大多数情况下使用已经足够了。

  
大家若有额外需要请自行修改,当然有更好的办法也请分享(*^__^*)  
over  
PS:01.18更新了一些keyCode的判断,以及错把110写成109≡(▔﹏▔)≡  
另外需要注意:对于使用右键菜单或者是菜单栏粘贴进来的需要额外处理;  
还有一种极端的情况:在网页中选中文字并拖动到文本框内,或者是在文本框中选中文字并拖动,这都需要做额外处理  
对于以上两种需要额外处理的情况,比较便捷的方法是加一个验证,比如jQuery.validate之类的表单验证,否则处理起来比较麻烦  
再PS:在win8下,切换到微软拼音可能会造成无法输入,不知道其他系统或者其他输入法有没有这个问题( *_*) (`~~`) ====

(责任编辑:admin)

上一篇:vuejs如何配置less

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服