日期:2014-05-16 浏览次数:20376 次
最近项目中需要用到文本框中值改变时触发某个事件,第一反应就是onchange事件,但是测试发现如果是用js赋值的话,是不会触发onchange事件的,后来在网上找了一下,都说是在ie浏览器中可以用onpropertychange事件,在火狐中使用oninput事件。说是这两个事件是一个效果,很多人没测试就在那转载。哎……
接下来我把测试过的跟大家分享下。
onchange事件是在键盘输入,失去焦点时候如果值改变就触发该事件(ie和火狐效果一样)。
onchange事件用js赋值时不会触发。
在ie浏览器中(本人是ie8,别的ie版本没测试)。
onpropertychange只要值改变都会触发,无论是键盘输入还是js赋值改变都会触发
oninput在ie中无效。
在火狐浏览器中
onpropertychange在火狐中无效。
oninput键盘输入时,只要值改变就触发(不管是否已经失去焦点),onchange是失去焦点时才会触发。
oninput事件js赋值是不会触发该事件的
?
文采不行,大家将就看,能理解意思就行,呵呵。
接下来把测试代码分享给大家。
?
<input type="text" id="test1" onchange="testChange();" /> <input type="text" id="test2" onpropertychange="testOnpropertychange();"/> <input type="text" id="test3" oninput="testOninput();"/> <input type="button" value="改变文本框值" onclick="changeText();">
?
?
function testChange(){ alert('cnange'); } function testOnpropertychange(){ alert('onpropertychange'); } function testOninput(){ alert('oninput'); } function changeText(){ document.getElementById("test1").value='文本框值已经改变'; document.getElementById("test2").value='文本框值已经改变'; document.getElementById("test3").value='文本框值已经改变'; }
?
?
?
有什么不对的地方希望大家指正。