表单常用事件☞过滤文本1

过滤文本1---只允许用户输入数值

首先解读下键盘与文本事件：

keypress事件 【event.charCode】

keypress: 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下 Esc键也会触发这个事件

用户按了下字符键，首先会触发 keydown 事件，然后紧跟着是 keypress 事件， 最后会触发 keyup 事件。其中，keydown 和 keypress 都是在文本框发生变化之前被触发的；而 keyup 事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放，就会重复触发 keydown 和 keypress 事件，直到用户松开该键为止

用户按了下非字符键，如果用户按下的是一个非字符键，那么首先会触发 keydown 事件，然后就是 keyup 事件。如果按 住这个非字符键不放，那么就会一直重复触发 keydown 事件，直到用户松开这个键，此时会触发 keyup 事件

textInput事件： 【event.data】

"Dom3级事件"规范中引入的新事件，用于替代keypress

两者区别：

1. 任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput 事件。
2. 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高级程序设计一书整理笔记记录】