JS监听输入框值变化兼容 onpropertychange、oninput

最新推荐文章于 2021-11-12 15:58:32 发布

转载最新推荐文章于 2021-11-12 15:58:32 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dcb3688/p/4608006.html

文章标签：

#javascript #ViewUI

本文介绍了一种在不同浏览器（包括IE和非IE如Chrome、Firefox）中实现实时输入监听的方法。通过使用onpropertychange和oninput事件，或在JS中判断浏览器类型并添加相应的监听事件，确保了在各种浏览器下都能正确响应输入变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onpropertychange 属IE

oninput 属除IE外（Chrome、Firefox、SS）

所以肯简单的办法嘛：

1. 一个input里面写两个属性事件

2.写在JS中判断浏览器添加监听事件

<script type="text/javascript">
    function immediately() {
        element = document.getElementById("mytext");
        if (window.ActiveXObject) {
            element.onpropertychange = webChange;
        } else {
            element.addEventListener("input", webChange, false);
        }
    }
    function webChange() {
        if (element.value) {
            document.getElementById("test").innerHTML = element.value;
        }
        ;
    }
</script>

Input：
<input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />
<div>您输入的值为：<span id="webtest"></span></div>
<br /><br /><br /><br /><br />
JS：
<input type="text" name="textfield" id="mytext" />
<div>您输入的值为：<span id="test"></span></div>
<script type="text/javascript">
    immediately();
</script>