input输入限制,只接受数字
一 需求
- 限制input的输入,只接收数字和小数点
- 限制输入位数
二 分析
- 个人观点:这是一个坑爹的需求,限制输入有很多bug,而且用户体验也很差,监听keypress事件会浪费很多性能
- 实现原理:虽然很坑爹,但是还是要做一下的,实现原理就是通过键盘的监听,阻止不必要的输入
- 实现方式:jQuery插件方式,现在工作中基本离不开jQuery,虽然有人说这很不好,但是我必须的用啊,因为我很low
三 代码和注释
- 基本上注释已经很全面了
- 基本上逻辑还是有点混乱的,只供参考,不喜欢的需求也就能搞成这样了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test input</title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript">
;(function($){
$.fn.extend({
numberInput:function(zs,xs){
//取节点,并过滤出 text和number
node = $(this).filter("input[type='text'],input[type='number']");
//检测节点,如果没有合适的节点,啥也不干
if(!node.length) return;
//整数部分默认值为1 ,如果输入0也会变成1
zs = zs || 1;
//小数位默认值是0
xs = xs || 0;
//绑定事件,绑定之前先解绑一下,免得重复绑定
node.off("keypress.sjsplugin")
//有小数部分和没有小数部分,绑定不同的函数,提高效能
if(xs != 0){
node.on("keypress.sjsplugin",function(e) {
var keyCode = e.keyCode; //保存keyCode
//获取当前输入状态
var text = $(this).val();
//只接收数字和小数点
if(!((keyCode>47 && keyCode<58) || keyCode == 46)){
e.preventDefault();
}
//匹配后只接受数字
var intParten = new RegExp("^\\d{1,"+ zs +"}\\.","i");
//匹配后只接受小数点
var intParten1 = new RegExp("^(\\d{"+ zs +"})|(0)$","i");
//匹配后结束输入
var numberParten = new RegExp("^\\d{1,"+ zs +"}\\.\\d{"+ xs +"}$","i");
//没有输入的时候,或者已经输入了数字和小数点,则不能再输入小数点
if((text.length == 0 || intParten.test(text))&& keyCode == 46){
e.preventDefault();
}
//如果输入了足够多的数字或者第一位输入了0 则只能输入小数点
if (intParten1.test(text) && (keyCode != 46)) {
e.preventDefault();
}
//如果输入已经符合 XX.XX 的格式,则拒绝所有输入
if (numberParten.test(text)){
e.preventDefault();
}
});
}else{
node.on("keypress.sjsplugin",function(e) {
var keyCode = e.keyCode; //保存keyCode
//获取当前输入状态
var text = $(this).val();
//只接收数字,不接收小数点
if(!(keyCode>47 && keyCode<58)){
e.preventDefault();
}
//没有小数部分
var intParten = new RegExp("^\\d{"+ zs +"}$","i");
//如果输入已经符合格式,则拒绝所有输入
if (intParten.test(text)){
e.preventDefault();
}
});
}
}
});
})(jQuery);
//使用方法
$(function(){
$(".didgit_input").numberInput(2,3); //起作用
});
</script>
</head>
<body>
<input type="text" class="didgit_input">
<input type="number" class="didgit_input">
<input type="password" class="didgit_input">
</body>
</html>
后记
使用过程中发现 keypress
在手机端行为诡异,在QQ手机浏览器中无法使用,所以如果你想在手机端使用,需要考虑别的事件来代替 keypress