联想输入涉及的事件类型和兼容性问题总结

    目前很多网站的搜索输入框,都支持联系输入;曾经自己也做了一个但是效果不好。其实问题的关键在于如何判断输入框“值的变动”。

曾经何时,我使用了,最最土的方法:

键盘事件keyup,但是,它有一个很严重的问题,只能捕捉输入字符的编码(不支持中文输入),后来看了,很多博客探讨了联想输入的方案,下面就总结一下这方便的知识:

 

textInput 

    DOM3中引入了文本事件,textInput 当用户再可编辑区域输入字符时触发该事件。
keypress不同的是,该事件只会在用户输入可视字符(可以输入中文)时触发,而keypres事件则只要按下键即触发(CapsLockBackspace)
所以,textInput考虑的主要是字符,可以通过事件对象的data属性获取所输入字符。不过可惜的是只有Chrome,safari支持(javascript高级程序设计第三版383页,说IE9也支持,经过验证不支持)

 
var name =document.getElementById("name");
name.addEventListener("textInput", function(e) { 
       console.log(e.data);
},false);

 

oninput事件

 

    HTML5oninput事件标准化了,该事件用来检测用户的输入状态。其实这个oninput提出了很久,目前所有的很多浏览器支持oninput,但是IE8不支持

 

name.addEventListener("input", function(e) {  
       var target = e.target;
    },false);

不过幸运的是IE有一个特有的状态变更事件

onpropertychange事件

    这个是IE特有的,目前IE7891011均支持;在输入框值变更时,触发该事件

 

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