如何用jQuery将输入框值追加到id为rev的textarea并换行？

嘿，这个需求其实挺常见的，我来给你捋捋怎么实现～核心就是获取新内容后，和textarea现有内容拼接时加上换行符，同时做一些细节处理避免无效内容。

完整实现步骤与代码 #

首先是HTML结构，假设你有一个输入框、触发按钮和目标textarea：

<input type="text" id="inputBox" placeholder="输入要追加的内容...">
<button id="addBtn">追加到评论区</button>
<textarea id="rev" rows="6" cols="50" placeholder="评论内容会显示在这里..."></textarea>

然后是jQuery逻辑，每一步的作用我都标注清楚了：

$(document).ready(function() {
  // 点击按钮时执行追加操作
  $('#addBtn').click(function() {
    // 1. 获取输入框的值，去除前后空格（避免空内容或纯空格被追加）
    const newText = $('#inputBox').val().trim();
    
    // 2. 如果输入为空，直接返回，不做任何操作
    if (!newText) {
      alert('请输入有效内容哦');
      return;
    }
    
    // 3. 获取textarea当前的已有内容
    const currentText = $('#rev').val();
    
    // 4. 拼接内容：如果已有内容不为空，先加换行符再追加新内容；否则直接用新内容
    const updatedText = currentText ? `${currentText}\n${newText}` : newText;
    
    // 5. 更新textarea的内容
    $('#rev').val(updatedText);
    
    // 6. 清空输入框并聚焦，方便用户继续输入
    $('#inputBox').val('').focus();
  });

  // 可选：支持按回车键直接追加，提升用户体验
  $('#inputBox').keydown(function(e) {
    if (e.keyCode === 13) {
      $('#addBtn').click(); // 复用按钮的点击逻辑
      e.preventDefault(); // 阻止输入框默认的回车换行行为
    }
  });
});

关键细节说明 #

• trim()的作用：过滤用户输入的前后空格，避免不小心输入空格后追加空行，保证内容的有效性。
• 换行符\n：textarea会识别这个转义字符为换行，直接拼在已有内容和新内容之间就能实现每条内容另起一行。
• 判断已有内容：避免当textarea为空时，第一条内容前面出现多余的换行符，让显示更整洁。
• 清空并聚焦输入框：这是细节优化，用户不用手动清空输入框，能直接输入下一条内容，体验更好。

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