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


Posted in Javascript onJanuary 18, 2013

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

曾经使用过的方法

通过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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
js replace正则表达式应用案例讲解
Jan 17 #Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 #Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 #Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 #Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 #Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 #Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 #Javascript
You might like
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php抽象类用法实例分析
2015/07/07 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
JavaScript实现区块链
2018/03/14 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python操作xml文件示例
2014/04/07 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python with语句和过程抽取思想
2019/12/23 Python
python对Excel的读取的示例代码
2020/02/14 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
文秘专业个人求职信
2013/12/22 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
大学生毕业评语
2014/12/31 职场文书
新学期感想
2015/08/10 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python