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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
Jquery cookie操作代码
Mar 14 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
vue点击自增和求和的实例代码
Nov 06 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使用curl制作简易百度搜索
2016/11/03 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
python 网络编程常用代码段
2016/08/28 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
python实现数字炸弹游戏程序
2020/07/17 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
春节联欢会主持词
2014/03/24 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书