过滤文本1---只允许用户输入数值
首先解读下键盘与文本事件:
keypress事件 【event.charCode】
keypress: 当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。按下 Esc键也会触发这个事件
用户按了下字符键,首先会触发 keydown 事件,然后紧跟着是 keypress 事件, 最后会触发 keyup 事件。其中,keydown 和 keypress 都是在文本框发生变化之前被触发的;而 keyup 事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放,就会重复触发 keydown 和 keypress 事件,直到用户松开该键为止
用户按了下非字符键,如果用户按下的是一个非字符键,那么首先会触发 keydown 事件,然后就是 keyup 事件。如果按 住这个非字符键不放,那么就会一直重复触发 keydown 事件,直到用户松开这个键,此时会触发 keyup 事件
textInput事件: 【event.data】
"Dom3级事件"规范中引入的新事件,用于替代keypress
两者区别:
- 任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput 事件。
- textInput 事件只会在用户按下能够输入实际字符的键时才会被触发,而 keypress 事件则在按下那些能够影响文本显示的键时也会触发(例如退格键)
了解上述以后,后续我们可以通过keypress事件监听文本框输入
1.屏蔽所有按键操作
eg:
textbox.addEventListener('keypress',function(event){
var event = event || window.event;
event.preventDefault()
},false)
2.只允许用户输入数值
注意:String.fromCharCode(numx) 可接受一个指定的 Unicode 值,然后返回一个字符串 String.fromCharCode(65,66,67) // ABC
textbox.addEventListener('keypress',function(event){
var event = event || window.event;
var charCode = event.charCode == 'number'? evetn.charcode : event.keyCode;
//在 Firefox 中,所有由非字符键触发的 keypress 事件对应的字符编码为 0
//屏蔽ctrl键
if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
event.preventDefault()
}
},false)
【注:以上内容为根据JavaScript高级程序设计一书整理笔记记录】