Javascript----input事件实现动态监听textarea内容变化

1、代码

<!DOCTYPE html>
<html>

<head>
    <title>textarea输入文字监听</title>
</head>

<body>
    <textarea id='text' maxlength="50" style="width: 400px; height: 200px;"></textarea>
    <span id='sp'></span>
    <script type="text/javascript">
    var val = document.getElementById("text");
    var tar = document.getElementById('sp');
    console.log(tar);

    val.addEventListener("input", function(e) {
        var t = this.value;
        console.log(t);
        if (t.length > 10) {
            e.returnValue = false;
        }
        tar.innerText = (50 - t.length);
    })
    </script>
</body>

</html>

 

2、效果

 

3、总结:比较textarea的几个事件,

a、onChange :鼠标市区焦点的时候触发

b、onInput : textarea内容改变的时候出发

c、通过监听键盘事件也是存在很多bug的,keyup存在当复制粘贴删除的时候

d、onpropertychange事件ie兼容性不好,can i you都没发找到兼容性信息,

 

posted @ 2017-08-08 15:46  SunLike阿理旺旺  阅读(1107)  评论(0编辑  收藏  举报