最近做input输入的时候,需求是只能让用户输入数字和小数点后最多能输入两位。
开始的做法是监听keydown事件,获取keycode,这样控制用户只能输入数字,但是后来发现安卓手机
在微信浏览器里keycode获取失败了,keycode始终是0。
请教一下大家还有没有什么好点的办法能实现这个需求。
=============================
后来我做了一个keyup事件来,每次事件触发就检查是否符合格式要求,代码如下:
$("#money").keyup(function(){
var reg = /^\d+\.?(\d{1,2})?$/;
while (!reg.test($(this).val()) && $(this).val() != "") {
$(this).val(checkStr($(this).val()));
}
});
//检查是否符合金额格式:只能输入数字且最多保留小数点后两位
function checkStr(str) {
str = str.substring(0,str.length-1);
return str;
}
但是我这样做有一个坏处就是,假如我之前输入22222这样是符合输入格式的,但是如果我在中间加入一个非法字符就会将后面的全部删掉,例如我输入222a22这样,就会变成222这样.
移动开发我不太了解,但是实时校验输入值的话,我一般都是用onchange或者focus,在输入框失去焦点之后立即做判断,见MDN.
这里有个例子。
首先,楼主的正则有点小问题,reg.test("22.");//output true 正常情况下这种输入方式是不对的吧;稍微改下var reg = /^d+?(.d{1,2})?$/;,把点和小数点后面的数字绑在一起,当有点的时候,后面应该是有数字的。
鉴于楼主想要的结果,我的思考思路是:使用正则判断的时候,如果输入格式是对的,则提交,否则返回错误。使用keyup事件的时候,最好设置一个最大长度,否则,当你一直往输入框输入值的时候,会遇到浏览器崩溃的情况,这个你可以测试一下。
首先你正则表达式有问题你的正则可以匹配到123.这种格式;建议改成/^d+(.d{1,2})?$/
然后你这里使用while有问题会把非数字字符以后的字符全部删除;可以使用replace(/1+/g,"")先将字符里面非0-9和.的字符全部过滤掉,然后再检查数字格式.但是这里还是会出现问题,当用户输入123.1.2.3这种情况等等
所以建议 input type="number" 来呼起移动端的数字键盘(提升体验和限制输入),然后不要帮用户过多的过滤矫正输入(既然都输入了错误的字符与格式那么矫正后的数据也未必是用户想输入的),但是基本的限制输入长度和小数点位数还是可以有的。但是在提交数据时一定要检查数据格式是否正确,不正确的数据提醒用户
今天自己有需求,所以参考后弄了一个pc的。
现在还有一个bug就是在小数点后面多选的时候没有办法输入,当然还有兼容性的处理。