在光标位置处插入内容

75 阅读 0 评论 50 点赞

我是靠谱客的博主鳗鱼皮卡丘，这篇文章主要介绍在光标位置处插入内容，现在分享给大家，希望可以做个参考。

场景：现有一输入框中已输入文本”你今天真好看“，

用户将光标定在”你“字后面，点击某处将内容添加到”你“后面，变成”你xxx今天真很好看“。

或

用户选中“你今天”，点击某处将内容添加到”你今天“后面，变成”你今天xxx真很好看“。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    async joinStr(data) {
    // 获取到输入框元素（可以使用document.getElement........或querySelector）
      const myField = this.$refs.searchIpt

      if (myField.selectionStart || myField.selectionStart === 0) {
        // 获取到光标所在的开始结束位置
        let startPos = myField.selectionStart
        let endPos = myField.selectionEnd
        // 将目标内容拼接起来放入输入框
        this.inputVal =
          myField.value.substring(0, startPos) +
          data +
          myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus()
        myField.setSelectionRange(endPos + data.length, endPos + data.length)
      } else {
        this.inputVal += data
      }
    },