现在有一个需求,就是input输入框中输入内容时自动搜索列表。刚开始以为绑定keyup事件就OK了,但测试时发现不是这样的。

输入英文的时候没问题,但是用中文输入法来输入的时候就有不对了,特别是在中文输入法中用鼠标选词时无法响应keyup事件。

查了下资料发现firefox、chrome、safari可以用input事件,测试了下很好。就是注意在jquery绑定事件时用bind方法。

IE下可以使用onpropertychange事件来代替input事件。onpropertychange事件是dom节点任一属性变化时都会响应的,具体是哪个属性发生了变化可以使用propertyName来取得。如:

<input type=”text” value=”xxx” id=”xx” onclick=”this.myprop=’xx’”>
<script type=”text/javascript”>
<!–
document.getElementById(‘xx’).attachEvent(‘onpropertychange’,function(o){
if(o.propertyName!=’value’)return;  //不是value改变不执行下面的操作
//.函数处理
});
//–>
</script>

然后又发现一个奇怪的问题:IE9下onpropertychange不响应退格键。不知道其它IE有没有这个问题,所以IE下需要同时绑定onpropertychange和onkeyup才行。

在使用jquery绑定onpropertychange时发现在IE9下绑定后不生效,跟踪jquery的bind代码时发现在IE9下的使用bind函数最终会通过addEventListener来实现。原来IE9已经支持addEventListener了,jquery先是测试addEventListener方法是否存在,存在就用addEventListener来绑定事件,否则使用attachEvent来绑定:

if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( “on” + type, eventHandle );
}

但是,在IE9下用addEventListener绑定onpropertychange是不行的,我直接用原始的dom绑定方法来测试没有成功:

document.getElementById( ‘b1′).addEventListener( ‘propertychange’,function() {

console.log($(‘#b1′).val());

},false);

换attachEvent就可以了。

所 以我改了jquery的源码:propertychange不通过addEventListener来绑定:

if ( elem.addEventListener &&  type!=’propertychange’) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( “on” + type, eventHandle );
}
最后,添加了inputChange方法来兼容IE9+ Chrome18+ FF12+ Safari5+:
jQuery.fn.inputChange = function(callback){
if($.browser.msie){
this.bind(“propertychange”, function(e){
if(e.originalEvent.propertyName == “value”){
$(this).keyup();
}
});
this.bind(“keyup”, callback);
}else{
this.bind(“input”, callback);
}
return( this );
}
使用方法:
Published in JavaScript

No Responses to “input输入框的输入时响应”

Leave a Reply

请输入算式结果(看不清请点击图片)
(必须)