联想输入涉及的事件类型和兼容性问题总结
目前很多网站的搜索输入框,都支持联系输入;曾经自己也做了一个但是效果不好。其实问题的关键在于如何判断输入框“值的变动”。
曾经何时,我使用了,最最土的方法:
键盘事件keyup,但是,它有一个很严重的问题,只能捕捉输入字符的编码(不支持中文输入),后来看了,很多博客探讨了联想输入的方案,下面就总结一下这方便的知识:
textInput
DOM3中引入了文本事件,textInput 。当用户再可编辑区域输入字符时触发该事件。
与keypress不同的是,该事件只会在用户输入可视字符(可以输入中文)时触发,而keypres事件则只要按下键即触发(如CapsLock,Backspace)。
所以,textInput考虑的主要是字符,可以通过事件对象的data属性获取所输入字符。不过可惜的是只有Chrome,safari支持(javascript高级程序设计第三版383页,说IE9也支持,经过验证不支持)
var name =document.getElementById("name"); name.addEventListener("textInput", function(e) { console.log(e.data); },false);
oninput事件
HTML5将oninput事件标准化了,该事件用来检测用户的输入状态。其实这个oninput提出了很久,目前所有的很多浏览器支持oninput,但是IE8不支持
name.addEventListener("input", function(e) { var target = e.target; },false);
不过幸运的是IE有一个特有的状态变更事件
onpropertychange事件
这个是IE特有的,目前IE7,8,9,10,11均支持;在输入框值变更时,触发该事件
name.onpropertychange =function() { console.log(this.value); }
onChange事件
提到onpropertychange就不得不onChange事件;区别:
Onpropertychange事件;输入值变动时触发,仅IE支持。
onChange事件:输入值变动,并且失去焦点时,触发。
email.addEventListener("change", function(e) { var target = e.target; },false); email.attachEvent("onchange", function(e) { var target = e.target; });
所以,我认为比较好的,联想输入的方案onpropertychange+oninput