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

Posted 2020-10-01 SunLike阿理旺旺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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都没发找到兼容性信息，

以上是关于Javascript----input事件实现动态监听textarea内容变化的主要内容，如果未能解决你的问题，请参考以下文章

Javascript,input文本框内容改变时自动触发事件，不是keyup或者onchange，需要可以解决中文输入的问题

动态代理+注解+反射实现View的点击事件绑定

React绑定事件动态化的实现方法

addhandler，addressof 来实现事件与事件处理过程的动态绑定

Qt 实现动态调整流程指令顺序（通过鼠标事件实现）

vue监听滚动事件实现动态锚点