码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-08-08 16:55:45      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:max   script   .com   blog   textarea   事件   input   bsp   class   

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都没发找到兼容性信息,

 

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

标签:max   script   .com   blog   textarea   事件   input   bsp   class   

原文地址:http://www.cnblogs.com/SunlikeLWL/p/7307212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!