脚本监听文本框输入

要实现监听文本框的输入,一般我们会用 keydownkeypress 或者 keyup

keydown,keypress,keyup

这三个事件中,keydownkeypress 发生在文本框 value 更新以前,并且可以调用 e.preventDefault() 来撤销键入,keyup 发生在文本框内容更新以后。keydownkeypress 的区别是 keypress 只在按下字符键时触发,而 keydown 也可以捕获 CtrlBackSpace 等不产生输入的键。

但是用这些事件会有一些缺陷,比如 keypress 在删除时不触发,所以就无法监听到文本框内容的所有改变。另外,改变文本框内容的方式多种多样,除了直接键入或者 Ctrl+V 粘贴,用户还可以不用键盘,比如通过右键菜单剪切、粘贴、删除,或者选中一段文字拖放进来,或者拖出去,这些行为用上面三个事件监听不到。所以为了更全面,要用 input 事件替代 keypress

input 事件

input 事件属于 HTML5,在文本框内容发生改变时就会触发,比如键入、剪切、粘贴、删除、右键菜单或者拖放,但是只有通过用户界面改变文本框的值才可以,所以用脚本来修改 value 时不会触发。现代浏览器和 IE9+ 中支持。用法和 keypress 类似。input 事件发生在 keypress 之后,并且也在 value 更新以后,所以不用 setTimeout(0) 就可以直接获取输入后的值。

Tips

除了 <textarea><input:text>input 事件还可以用来监听 <input:password> 和 HTML5 的 <input:search>

IE9 支持 input 事件,需要用 addEventListener 来注册,不能用 attachEvent 注册此事件。而且在 IE9 中有 bug,删除字符时不触发事件(也包括剪切、拖拽)。

Safari5 以及更早版本中,在 <textarea> 上无法触发 input 事件,可以用下面的 textInput 代替。

textInput 事件

textInput 事件和 input 类似,但 textInput 在剪切、删除、粘贴、拖放时不触发(在 chrome 中测试粘贴和拖放可以触发)。

Tips

Firefox 和 Opera 不支持 textInput 事件。IE9+ 支持,事件名称为小写:textinput

event.data 返回新输入的文本(在 chrome 中测试未实现)。

change 事件

change 事件也可以用来监听文本框的改变,但是只有在失去焦点时触发。IE 支持。

Tips

change 事件在 <select><input:checkbox><input:file> 发生改变时也可以触发。

阅读全文 »

flight