HTML textarea按回车键无法换行问题及代码调试需求

嘿，这个问题我之前也碰到过！你原来的写法是直接把整个文本内容取出来追加换行符，这就会忽略当前光标位置，强制把换行加到内容末尾，光标自然也跟着跳到最后了。要实现和正常输入一样的回车换行效果，得针对光标所在位置来插入换行，同时调整光标位置。

试试这段代码：

$("#descre").on('keydown', function(e) {
  const code = e.keyCode || e.which;
  if (code === 13) {
    e.preventDefault();
    // 获取原生textarea元素，方便操作光标
    const textarea = this;
    // 记录当前光标开始和结束的位置（未选中文本时两者相等）
    const cursorStart = textarea.selectionStart;
    const cursorEnd = textarea.selectionEnd;
    const currentValue = textarea.value;

    // 在光标位置插入换行符，拼接成新内容
    textarea.value = currentValue.substring(0, cursorStart) + "\n" + currentValue.substring(cursorEnd);

    // 把光标移到换行后的位置，保持输入连贯性
    textarea.selectionStart = textarea.selectionEnd = cursorStart + 1;
  }
});

代码说明： #

• 首先阻止回车的默认行为（避免浏览器可能的其他处理）
• 通过selectionStart和selectionEnd获取当前光标位置，这两个是原生textarea的API，能准确拿到光标所在的索引
• 将文本内容拆成「光标前的内容」+「换行符」+「光标后的内容」，这样换行就会出现在光标当前位置
• 最后把光标位置设置为原光标位置+1，让光标跳到新插入的换行后面，和正常输入体验完全一致

这样修改后，不管光标在文本的哪个位置，按下回车都会在当前位置插入换行，光标也会自动移到新行的开头，完全符合日常输入习惯。

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