2.5.5、输入框事件

一、onfocus/onblur(获取节点/遗失节点)

<input type="text" id="app">
    <script>
        var app = document.getElementById("app");
        app.onfocus = function(){
            this.style.backgroundColor = "red";
        }
        app.onblur = function(){
            this.style.backgroundColor = "yellow";
        }
    </script>

二、onchange

当输入框的内容发生改变的时候，触发

        var input = document.getElementById("input");
        input.onchange = function(){
            console.log("hello world")
        }

三、demo 输入框限定字数

<style>
        textarea{
            border: 1px solid #333;
        }
    </style>
<p>还可以输入<em id="em" style="color:red">0</em>/30</p>
    <textarea  id="txt" cols="30" rows="10"></textarea>
    <script>
        var txt =  document.getElementById("txt");
        var em =  document.getElementById("em")
        txt.onkeydown = function(){
            var length = this.value.length;
            if(length<=30){
                em.innerHTML =  this.value.length;
            }else{
                alert("只能输入30个字符")
            }
        }
    </script>