使用jQuery实现带字符计数的TextArea与内容追加功能

首先调整HTML结构，替换原有的input为textarea，添加字符数显示容器和用于追加文本的空div：

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Criando páginas com jQuery</h1>
</div>
<div class="container mt-5">
  <!-- 保留原有其他区块内容 -->
  <div class="row div2">
    <!-- 字符数显示容器 -->
    <p id="charCount">0 caracteres</p>
    <!-- 替换input为textarea，适配多行输入需求 -->
    <textarea class="contar form-control mb-3" placeholder="Digite seu texto aqui..."></textarea>
    <button id="copiar" type="button" class="btn btn-warning btn-xs">Copiar</button>
    <!-- 用于接收追加文本的空div -->
    <div id="outputDiv" class="mt-3 p-3 border"></div>
  </div>
  <!-- 保留原有其他区块内容 -->
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后编写jQuery逻辑，实现两个核心功能：

// 实时统计textarea的字符数量
$('.contar').on('input', function() {
  const charLength = $(this).val().length;
  $('#charCount').text(`${charLength} caracteres`);
});

// 点击按钮将textarea文本追加到目标div
$('#copiar').click(function() {
  const inputText = $('.contar').val().trim();
  if (inputText) {
    // 使用append而非text，避免覆盖div已有内容
    $('#outputDiv').append(inputText + '<br>');
    // 可选：清空textarea并重置字符数统计
    $('.contar').val('');
    $('#charCount').text('0 caracteres');
  }
});

关键说明 #

• 字符数统计：监听textarea的input事件，兼容输入、删除、粘贴等所有文本变更操作，通过$(this).val().length获取当前字符长度并更新显示。
• 文本追加逻辑：使用append()方法实现内容追加，text()会覆盖原有内容，不符合需求；添加<br>是为了实现换行效果，可根据需求删除。
• 选择器使用：全程使用jQuery类选择器（.contar）、ID选择器（#copiar、#charCount、#outputDiv），满足仅用jQuery选择器实现的要求。
• 空值过滤：通过trim()和空值判断，避免追加无意义的空文本。

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