在光标位置处插入内容

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

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

或

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

    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
      }
    },

最后

以上就是鳗鱼皮卡丘为你收集整理的在光标位置处插入内容的全部内容，希望文章能够帮你解决在光标位置处插入内容所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。