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

最新推荐文章于 2024-08-06 11:58:02 发布

YinghaoGuo

最新推荐文章于 2024-08-06 11:58:02 发布

阅读量1.8w

点赞数 3

分类专栏： javascript篇文章标签： javascript jquery input文本改变事件

本文链接：https://blog.csdn.net/qq_22855325/article/details/72851174

版权

javascript篇专栏收录该内容

27 篇文章 1 订阅

订阅专栏

如果写过检测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改变事件即可。