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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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 根据IP地址控制访问的代码
2010/04/22 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
学校七一活动方案
2014/01/19 职场文书
函授药学自我鉴定
2014/02/07 职场文书
青年文明号口号
2014/06/17 职场文书
迎国庆演讲稿
2014/09/15 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
追悼会答谢词
2015/01/05 职场文书
婚庆答谢词大全
2015/09/29 职场文书