如何在拖拽图片至textarea后将光标移至高亮文本末尾？

当然可以实现！当你拖拽图片到textarea时，浏览器默认会选中刚插入的文本内容，我们只需要在插入完成后调整光标的位置即可。这里有两种可行的方案：

方案一：监听textarea的input事件（简单直接） #

这种方式会在textarea内容变化后触发，自动取消选中状态并把光标移到文本末尾：

// 原有的拖拽事件代码保持不变
document.querySelectorAll('.emoteImage').forEach((emoteImage) => {
  emoteImage.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text', emoteImage.alt);
    event.effectAllowed = "copy";
  });
});

// 新增：监听textarea的内容变化事件
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
  // 取消选中，将光标定位到文本末尾
  textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
});

方案二：手动处理drop事件（精准控制） #

如果你想更灵活地控制插入位置和光标，可以直接接管textarea的拖拽逻辑，手动插入文本并设置光标：

document.querySelectorAll('.emoteImage').forEach((emoteImage) => {
  emoteImage.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text', emoteImage.alt);
    event.effectAllowed = "copy";
  });
});

const textarea = document.querySelector('textarea');
// 阻止默认拖拽悬浮行为，确保drop事件能触发
textarea.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 手动处理拖拽放下逻辑
textarea.addEventListener('drop', (e) => {
  e.preventDefault();
  const emoteText = e.dataTransfer.getData('text');
  if (!emoteText) return;

  // 获取当前光标选中的位置
  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;
  const currentValue = textarea.value;

  // 插入表情文本
  textarea.value = currentValue.substring(0, startPos) + emoteText + currentValue.substring(endPos);
  
  // 将光标移到插入文本的末尾
  textarea.selectionStart = textarea.selectionEnd = startPos + emoteText.length;
});

样式与HTML结构（保持不变） #

img { width: 100px; }

<div class="emote"> 
  <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ficons.iconarchive.com%2Ficons%2Fpaomedia%2Fsmall-n-flat%2F512%2Fcat-icon.png&f=1" alt="emote1" title="emote1" class="emoteImage"> 
</div> 
<textarea></textarea>

原理说明 #

• 方案一的优势是简单粗暴，不管是拖拽还是其他方式修改textarea内容，都会自动把光标移到末尾，适合需求简单的场景。
• 方案二则通过手动处理拖拽流程，精准控制文本插入的位置和光标落点，完全避免了浏览器默认的选中行为，适配更复杂的交互场景。

你可以根据自己的实际需求选其中一种，两种都能实现你想要的「光标移到高亮文本末尾」的效果~

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