联想输入实施方案小议

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

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

曾经何时，我使用了，最最土的方法：

键盘事件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