textarea二次粘贴内容未在光标位置插入的问题排查

你二次粘贴出现异常，核心问题出在自定义的paste事件监听器上，有两个关键问题：

• 完全无视光标位置：用element.value += ...的方式是把粘贴内容直接追加到文本框末尾，不管你光标停在中间哪一行，内容都会跑到最后，自然不会出现在预期位置。
• 破坏原有排版：调用.trim()会把粘贴内容首尾的换行、空白全删掉，原本的三行内容格式直接乱掉，导致排版错乱。

另外，监听器里直接用全局event而不是参数里的e，虽然部分浏览器能跑，但属于不规范写法，也可能埋下隐患。

要解决这个问题，得做这几点：

1. 先拿到当前光标在文本框里的位置，把内容插到光标处，而不是硬怼到末尾。
2. 针对Excel粘贴的光标跳行问题，只去掉内容末尾多余的换行就行，别用trim()把所有首尾空白都删了，保留正常的换行结构。
3. 用事件参数e来拿剪贴板数据，代码更规范。

JavaScript 部分 #

let element = document.getElementById("post-text");

element.addEventListener('paste', (e) => {
  e.preventDefault();
  // 只移除末尾的多余换行，解决Excel粘贴光标跳行问题，保留内容原有格式
  const pasteText = (e.clipboardData || window.clipboardData).getData("text").replace(/\n$/, '');
  // 获取当前光标选中的起始和结束位置
  const startPos = element.selectionStart;
  const endPos = element.selectionEnd;
  const currentContent = element.value;
  // 在光标位置插入粘贴内容
  element.value = currentContent.substring(0, startPos) + pasteText + currentContent.substring(endPos);
  // 把光标移到粘贴内容的末尾，符合正常操作逻辑
  element.selectionStart = element.selectionEnd = startPos + pasteText.length;
});

document.getElementById('post-button').addEventListener('click', function() {
  var lines = $('#post-text').val().split('\n');
  console.log(lines);
  console.log(lines.length);
  var firstLine = lines[0];
  console.log(firstLine);
  var secondLine = lines[1];
  console.log(secondLine);

  // 先清空之前的内容，避免重复追加
  $("#phrase").empty();
  for (let i = 0; i < lines.length; i++) {
    $("#phrase").append("<div>" + lines[i] + "</div>")
  }
});

CSS 部分 #

#case-stack p {
  white-space: pre-wrap;   /* 保留换行格式 */
}

textarea {
  width: 100%;
}

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required></textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="phrase"></div>

• 修复后的粘贴逻辑会精准定位光标位置插入内容，不管你光标在文本框的哪个位置，粘贴内容都会出现在预期地方。
• 用replace(/\n$/, '')代替trim()，只处理Excel粘贴后末尾多余的换行，不会影响内容本身的换行和开头空白，完美兼顾了Excel粘贴的需求和正常粘贴的格式。
• 粘贴完成后自动把光标移到内容末尾，和原生粘贴的交互逻辑一致，使用起来更顺手。

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