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

 更新时间:2013年01月18日 16:21:14   作者:  
很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩,接下来介绍曾经使用过的方法与自定义方法的对比,感兴趣的朋友可以了解下啊
很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩。

曾经使用过的方法

通过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下,切换到微软拼音可能会造成无法输入,不知道其他系统或者其他输入法有没有这个问题( *_*) (`~~`) ====

相关文章

  • Javascript表格翻页效果实现思路及代码

    Javascript表格翻页效果实现思路及代码

    表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现,感兴趣的朋友可以参考下
    2013-08-08
  • js时间查询插件使用详解

    js时间查询插件使用详解

    这篇文章主要为大家详细介绍了js时间查询插件的使用方法,结合bootstrap进行使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 通过扫描二维码打开app的实现代码

    通过扫描二维码打开app的实现代码

    在项目开发中遇到这样的需求,扫描二维码打开app如果用户没有这个app则提示它跳转,怎么实现呢?下面小编给大家分享通过扫描二维码打开app的实现代码,感兴趣的朋友参考下吧
    2016-11-11
  • es5 类与es6中class的区别小结

    es5 类与es6中class的区别小结

    这篇文章主要给大家介绍了关于es5 类与es6中class区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 查看图片(前进后退)功能实现js代码

    查看图片(前进后退)功能实现js代码

    前进后退实现的前提是:images文件夹下图片的命名是从1~5.jpg有规律的,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-04-04
  • js简单的表拖拽

    js简单的表拖拽

    用js实现表格的拖拽效果代码
    2008-05-05
  • Echarts之悬浮框中的数据排序问题

    Echarts之悬浮框中的数据排序问题

    Echarts非常强大,配置也非常的多,有很多细节需要深入研究。这篇文章主要介绍了Echarts之悬浮框中的数据排序问题,需要的朋友可以参考下
    2018-11-11
  • 解决layui前端框架 form表单,table表等内置控件不显示的问题

    解决layui前端框架 form表单,table表等内置控件不显示的问题

    今天小编就为大家分享一篇解决layui前端框架 form表单,table表等内置控件不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript设计模式之代理模式简单实例教程

    JavaScript设计模式之代理模式简单实例教程

    这篇文章主要介绍了JavaScript设计模式之代理模式,简单描述了代理模式的概念、功能、组成并结合实例形式较为详细的分析了javascript代理模式的定义与使用相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • JavaScript实现前端飞机大战小游戏

    JavaScript实现前端飞机大战小游戏

    这篇文章主要为大家详细介绍了JavaScript实现前端飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论