首页 > 代码库 > html5 input[number]类型输入非数字字符val()为“”和解决方案

html5 input[number]类型输入非数字字符val()为“”和解决方案

html5新增的number输入类型会在input框获得焦点的时候呼起数字键盘,增加了体验的效果。但是在一些安卓机器上,还是能够切换道字符输入,用户也会不小心输入“+”“—”之类的非数字字符。测试了一下,number类型是会自动忽略字母字符和其他非数字字符的,除了“+”“—”“.”这两个字符可以输入,因为这两个是正负数和小数点的符号。

number类型还有一个很坑的点是,如果输入框中的内容不是纯数字(正数,负数都行),内容中包含一些字符的时候,对应dom元素的value就是空("")。

因此无论是原生的document.getElementById("txt").value还是jq的$(‘selector‘).val()得到的都是空。

这个问题很难解决,即使是keyup和keypress监听输入框也会遇见。

我做的需求是要求不能够输入小数,即是不能输入数字以外的字符。输入以后就把字符删除。

我的做法是用正则表达式检测出输入了字符,把最后一个字符去掉。用keyup监听。

keyup/keypress监听在输入小数点或者+—符的当下是感知不到的,即是dom的value没有改变。在符号后再输入数字字符时才能通过value得知。

$("#moneyInput").on("keyup", function(e) {
var obj = $("#moneyInput"),
value = http://www.mamicode.com/obj.val();
if (!(/(^\+?[1-9][0-9]*$)/.test(value))) {
value = http://www.mamicode.com/value.substring(0,value.length-1);
// obj.val("");
obj.val(value);
}
});

 

html5 input[number]类型输入非数字字符val()为“”和解决方案