如何为自动调整高度的textarea自动添加字符计数span元素

给你修改后的完整代码，同时满足自动调整高度和实时字符统计的需求：

var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
    // 初始化textarea高度
    tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
    // 创建字符统计span
    var countSpan = document.createElement('span');
    countSpan.className = 'char-count';
    // 初始化统计文本
    updateCharCount(tx[i], countSpan);
    // 将span插入到textarea后面
    tx[i].parentNode.insertBefore(countSpan, tx[i].nextSibling);
    // 绑定输入事件，同时处理高度和统计更新
    tx[i].addEventListener("input", function(e) {
        // 调整高度
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
        // 更新字符统计
        var span = this.nextElementSibling;
        updateCharCount(this, span);
    }, false);
}

// 统一处理字符统计更新的函数
function updateCharCount(textarea, span) {
    var count = textarea.value.length;
    span.textContent = count === 0 ? '已输入0个字符' : `已输入${count}个字符`;
}

关键改动说明 #

• 遍历每个textarea时，动态创建<span>作为统计容器，直接插入到对应textarea的下方
• 新增updateCharCount函数统一处理字符统计逻辑，避免重复代码
• 初始化时就执行一次统计更新，即使页面加载时textarea已有内容，也能正确显示字符数
• 输入事件中同时处理高度调整和统计更新，确保两者实时同步

内容的提问来源于stack exchange，提问作者Roza