监听INPUT值的即时变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="auther" content="fq" />
    <title>监听输入框值的即时变化 onpropertychange oninput</title>
    <script type="text/javascript">
    function immediately() {
        var element = document.getElementById("mytext");
        if ("v" == "v") {
            element.onpropertychange = webChange;
        } else {
            element.addEventListener("input", webChange, false);
        }

        function webChange() {
            if (element.value) {
                document.getElementById("test").innerHTML = element.value
            };
        }
    }

    function addValue() {
        document.getElementById("mytext").value = 'dfdsafdsfsfsdfsdfdsf';
        document.getElementById("mytext2").value = 'dfdsafdsfsfsdfsdfdsf';
    }
    </script>
</head>

<body>
    <input type="button" id="txts" value="点击加载值!" onclick="addValue();" /> 直接写在页面中的示例：
    <input type="text" id="mytext2" 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 />
    <input type="text" id="mytext3" 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>
    <script type="text/javascript">
  /*  function fn() {
        console.log(this.a);
    }
    var obj = {
        a: 2,
        fn: fn
    };
    var bar = obj.fn;
    var a = "全局";
    bar();


    <!----> 
    var obj = {
        a: 2
    };
    fn.call(obj);

    var obj = {
        a: 3
    }
    fn.apply(obj);

    var a = 10;
    fn.call();


    function Fun(a) {
        this.a = a;
    }
    var bar = new Fun(2);
    console.log(bar.a);


    function fn1() {
        var b = 2;
        this.fn2(); //以为this引用的是fn1的词法作用域
    }

    function fn2() {
        console.log(this.b);
    }
    fn1(); //ReferenceError*/
    </script>
  <!--   <script type="text/javascript" src="socket.io.js"></script> -->
</body>

</html>

相关阅读:
Delete Them
Toda 2
JQuery案例：购物车加减
 JQuery案例：折叠菜单
 JQuery案例：暖心小广告
 JQuery案例：左右选
 JQuery动画
 JQuery切换事件
 JQuery文档操作
 JQuery选择器
原文地址：https://www.cnblogs.com/huaxili/p/5411341.html