Vue获取textarea光标插入内容

heng哼哈嘿

于 2020-07-01 14:09:56 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/man_nam_man/article/details/107062805

vue 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在富文本编辑器中如何精确处理光标位置，包括获取和设置光标位置的方法，这对于实现诸如插入特定字符或格式化文本等功能至关重要。文章详细解释了如何使用JavaScript操作textarea元素，以及如何在用户选择文本时插入内容而不破坏原有格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div style="background-color: #efefef; width:100%;height: 300px;">
  <textarea ref="contentArea" v-model="contentFormula"  style="width: 100%;height: 100%">
    {{contentFormula}}
  </textarea>
</div>

const myField = this.$refs.contentArea;
if (myField.selectionStart || myField.selectionStart === 0) {
  let startPos = myField.selectionStart;
  let endPos = myField.selectionEnd;
  this.contentFormula = myField.value.substring(0, startPos) + value + myField.value.substring(endPos, myField.value.length);
  this.$nextTick(()=>{
    myField.focus();
    myField.setSelectionRange(endPos + value.length, endPos + value.length)
  })
} else {
  this.contentFormula += value
}