您的位置：首页 > 产品设计 > UI/UE

input输入框和textarea文本框的value改变事件

2017-06-03 11:46 856 查看

如果写过检测input或者textarea输入框文本检测的人一定知道onchange或者jq的change方法检测文本变化是检测不到的，因为该事件是在文本框获得焦点，并且改变其中的内容之后再失去焦点才能触发的，也就是说输入框单纯获得焦点，或者单纯失去焦点，或者获得焦点的时候和失去焦点的时候内容一样，onchange方法是都不会触发的，这就涉及了输入框属性改变的问题。

如果在输入框中输入内容，在其失焦之前再将刚刚输入的内容删掉，并不会触发onchange事件，这说明onchange事件还是会对输入框中的文本进行检测，但是却不仅仅是对输入框文本的检测，还有属性和状态的检测，同时changing才能触发事件，属性当然指的是value文本的长度文本内容等，状态就是input输入框的聚焦和失焦。

综上所述，如何只监听input和textarea文本的变化呢？如下：

<body>
<input id="line" type="text" placeholder="请输入..." >
<textarea id="area" placeholder="请输入" ></textarea>
<script>
document.getElementById('line').onpropertychange = function(){console.log('IE9或更老的版本');} //IE10及更老版本IE可用，IE11中不可用
$('#line').bind('input',function(){  //兼容IE9及以上版本和其他浏览器
console.log('value changed!');
});
$('#area').bind('input',function(){
console.log('text changed!!!');
});
</script>
</body>

由兼容性考虑，如果要兼容IE8及更低IE版本浏览器，需要使用onpropertychange方法，否则只用input事件监听文本框的value改变事件即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jquery input文本改变事件

相关文章推荐

新的分享

章节导航