js监听textarea 内容的变化，并计算内容的长度

最新推荐文章于 2025-06-17 13:48:38 发布

原创最新推荐文章于 2025-06-17 13:48:38 发布 · 1.7w 阅读

6 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用HTML5的oninput事件和IE的onpropertychange事件监听textarea内容变化，同时提供示例代码展示如何实现内容长度的计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听textarea 内容变化：HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化

html代码如下：

  <div class="customer-message">
                    <label for="customerMessage">留言</label>
                    <textarea id="customerMessage" maxlength="500o"></textarea>
                    <p class="text-count"><span id="textCount">0</span>/500（留言多余10个字）</p>
                </div>

js代码如下：

 window.onload = function () {
       //获取文本内容和长度函数
        function txtCount(el) {
            var val = el.value;
            var eLen = val.length;
            return eLen;
        }
       
        var el = document.getElementById('customerMessage');
        el.addEventListener('input',function () {
            var len =  txtCount(this); //   调用函数 
            document.getElementById('textCount').innerHTML = len;
        });
        
        el.addEventListener('propertychange',function () {//兼容IE
            var len =  txtCount(this); //   调用函数 
            document.getElementById('textCount').innerHTML = len;
        });
    }

记录如上