项目中要用到监听input框的输入值,差实时更新数据,开始用input的onchange 方法,但onchange方法必必须要在失去焦点的情况下才能触发,很明显无法满足我们的需求。
图1:
图2
如图2所示,输入关键字,立即将结果显示在下方方框中,以实现实时查看。
onpropertychange:
IE下,onpropertychange 能用于即时捕获一个html元素的变化情况,而我们常用的onchange,则当 属性值改变时还必须并且当前元素失去焦点(onblur)时才可以激活该事件。但onpropertychange只能在IE下使用。
$("#you_input_id").on('input',function(){ //do something });
$("#you_input_id").each(function(){ var _this = this; if(this.attachEvent){ this.attachEvent('onpropertychange',function(e){ if(e.propertyName!='value')return; $(_this).trigger('input'); }); } });
以上回调函数中会传入一个参数e,该事件有很多属性值,判断当前发生变化的属性名称是否为我们要找的propertyName, 如果propertyName==value,则表示是input 的value值发生变化,则此时调用 ‘input’事件。
oninput:
ie之外的大部分浏览器可以兼容oninput,基本用法如下:
<input type="text" name="youinput" oninput="alert(this.value);"/>
如果你使用的jquery库,则可以这样使用:
$("#you_input_id").on('input',function(){ //do something });
要兼容不同浏览器,只需将如下代码放入即可:
$("#you_input_id").on('input',function(){ //do something }); $("#you_input_id").each(function(){ var _this = this; if(this.attachEvent){ this.attachEvent('onpropertychange',function(e){ if(e.propertyName!='value')return; $(_this).trigger('input'); }); } });