要求:
input框只能输入数字。
问题:
只判断e.keyCode的情况下,在中文输入法中出现了e.keyCode均为229的情况,不论输入数字还是其他。
解决:
修改input框的type为number,但会出现默认样式,并且并不能真的限制数字。(在中文输入法下还是能输入中文)
1. 中文输入法
在中文打出的字母没有真正的键入input框的时候是会触发事件的,但再点击回车d不会被输入input框。
2. 英文输入法
输入d之后并没有显示,但是出现了奇怪的现象,onkeypress事件的keyCode却显示的很奇怪,它识别成了数字键盘上的4。
input框有默认样式,遂换方法。
不过这里的input框type为number的时候,复制粘贴也是不会显示中文的,问题只在未键入时会触发。
2. 采用正则:
在代码里拦截将非数字替换为空。
text.value = text.value.replace(/[^\d]/g,'');
但后来发现这样不能输入符号,所以换成了:
text.value = text.value.replace(/[^-\d]/g,'');
那么来看看这次的反应:
中文输入法下,onkeydown的keyCode还是229。
空格之后没有被输入:
中文输入法下输入1:我点击的是右边小键盘的1,down和up事件都识别对了,但press却识别成了字母上面的1。
这次点击字母上面的1:就全都是49,识别对了。
试试特殊键:
回车不会触发oninput事件:
alt:只有down和up事件
空格:
tab键:按下后输入框失去焦点并且只触发了down事件。
capslock:就是切换大小写那个按键,也只有down和up事件。
shift:
结论:(chrome下)
- 中文输入法下不会触发onkeypress事件。
- 在没有真正被键入输入框的时候,keyCode与charCode都会是undefined,而which是0。
- 中文输入法下onkeydown的keyCode及which都是229,charCode=0,但onkeyup可以得到真正的keyCode。
- ctrl只会触发onkeydown事件。
- alt,capslock,shift只会触发onkeydown和onkeyup事件。
- 空格都会触发。
- 用onkeypress监听回车是不可取的,因为它根本不会触发。
- onkeypress谨慎使用,因为它监控的并不准确,但如果只是监控数字不用那么精确的话就可以。
- 事件的执行顺序依次是:onkeydown --> onkeypress --> oninput --> onkeyup。
对于ff和ie表现可能会不一样,具体需要再监控。