Vue.js中textarea插入emoji后如何将光标定位到插入内容后方

你现有代码的核心问题是仅设置了selectionEnd属性，未同步设置selectionStart，两者不一致时浏览器会渲染为选中状态而非正常闪烁光标；同时光标位置计算基准错误，导致插入后位置不符合预期。

调整后的代码 #

addEmoji (emoji) {
  const textarea = this.$refs.textarea
  // 以插入前的光标起始位置为计算基准
  const insertPos = textarea.selectionStart
  const start = this.content.substring(0, insertPos)
  // 从selectionEnd截取后续内容，兼容选中文本直接替换的场景
  const end = this.content.substring(textarea.selectionEnd)
  this.content = start + emoji.native + end

  textarea.focus()
  this.$nextTick(() => {
    // 同时设置selectionStart和selectionEnd，保证为光标状态而非选中状态
    const newCursorPos = insertPos + emoji.native.length
    textarea.selectionStart = newCursorPos
    textarea.selectionEnd = newCursorPos
  })
}

核心调整点 #

• 替换光标位置计算基准：使用插入前的selectionStart而非selectionEnd计算新位置，无论用户是否提前选中了文本，插入后光标都会精准落在新增emoji的后方
• 优化文本拼接逻辑：从selectionEnd截取后续内容，支持用户选中部分文本后直接用emoji替换选中内容的场景
• 补全光标属性设置：同时给selectionStart和selectionEnd赋相同值，确保显示为正常可输入的闪烁光标，不会出现选中区间的问题

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