如何在textarea中每隔n个字符实现自动换行？

嘿，我懂你遇到的问题啦——cols属性只是控制文本域的视觉宽度，根本没法强制限制每行只能输入指定数量的字符对吧？别担心，用JavaScript或者jQuery都能轻松搞定这个需求，我给你写两个简单易懂的示例，刚接触也能快速上手～

首先给你的textarea加个id，方便我们获取元素，然后监听输入事件来处理文本：

<textarea rows="2" cols="20" name="id" wrap="soft" id="limitedTextarea"> Hello </textarea>

<script>
const textarea = document.getElementById('limitedTextarea');
const maxCharsPerLine = 20; // 这里改成你想要的每行最大字符数

textarea.addEventListener('input', function() {
  // 先把文本里已有的换行都去掉，重新统一处理
  let value = this.value.replace(/\n/g, '');
  let newValue = '';
  
  // 每满maxCharsPerLine个字符，就插入一个换行
  for (let i = 0; i < value.length; i++) {
    if (i > 0 && i % maxCharsPerLine === 0) {
      newValue += '\n';
    }
    newValue += value[i];
  }
  
  // 只有内容真的变化了才更新，避免不必要的光标跳动
  if (newValue !== this.value) {
    // 先记录当前光标位置
    const cursorPos = this.selectionStart;
    this.value = newValue;
    // 调整光标位置，确保输入时光标不会乱跑
    const newCursorPos = cursorPos + (newValue.slice(0, cursorPos).match(/\n/g) || []).length - (this.value.slice(0, cursorPos).match(/\n/g) || []).length;
    this.setSelectionRange(newCursorPos, newCursorPos);
  }
});
</script>

这个代码会在用户输入时自动帮你拆分文本，每20个字符就换一行，还处理了光标位置的问题，不会让输入体验变糟～

如果你想用jQuery的话，记得先引入jQuery库，然后用jQuery的语法来写，逻辑和原生JS差不多，但代码更简洁：

<!-- 先引入jQuery，这里用的是官方CDN，你也可以用本地文件 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<textarea rows="2" cols="20" name="id" wrap="soft" id="limitedTextarea"> Hello </textarea>

<script>
$(document).ready(function() {
  const maxCharsPerLine = 20; // 同样可以改成你需要的数字
  $('#limitedTextarea').on('input', function() {
    let value = $(this).val().replace(/\n/g, '');
    let newValue = '';
    
    for (let i = 0; i < value.length; i++) {
      if (i > 0 && i % maxCharsPerLine === 0) {
        newValue += '\n';
      }
      newValue += value[i];
    }
    
    if (newValue !== $(this).val()) {
      const cursorPos = this.selectionStart;
      $(this).val(newValue);
      // 调整光标位置，保证输入流畅
      const newCursorPos = cursorPos + (newValue.slice(0, cursorPos).match(/\n/g) || []).length - ($(this).val().slice(0, cursorPos).match(/\n/g) || []).length;
      this.setSelectionRange(newCursorPos, newCursorPos);
    }
  });
});
</script>

小提示 #

• 你可以随便修改maxCharsPerLine的值，比如改成15、10，都能生效。
• 你的wrap="soft"设置没问题，它只是让文本在提交表单时不会自动添加换行（如果需要提交时带换行，可以改成wrap="hard"），不影响我们的自动换行逻辑。
• 处理光标位置这一步很重要，不然用户输入到换行位置时，光标会突然跳到末尾，体验很差哦～

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