在光标位置处插入内容

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

用户将光标定在”你“字后面,点击某处将内容添加到”你“后面,变成”你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
      }
    },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在contenteditable容器中将内容插入光标,可以通过以下步骤实现: 1. 首先,获取要插入内容的父容器,例如一个div元素,可以使用如下代码获取: ```javascript var container = document.getElementById("container"); ``` 2. 然后,获取当前光标位置,可以使用如下代码获取: ```javascript var selection = window.getSelection(); var range = selection.getRangeAt(0); ``` 3. 接下来,创建要插入的节点或者文本,例如一个span元素,可以使用如下代码创建: ```javascript var node = document.createElement("span"); node.innerHTML = "要插入内容"; ``` 或者直接创建一个文本节点: ```javascript var textNode = document.createTextNode("要插入内容"); ``` 4. 最后,将节点或文本插入光标所在位置,可以使用如下代码将节点或文本插入到range的起始位置: ```javascript range.insertNode(node); ``` 或者直接将文本插入到range的起始位置: ```javascript range.insertNode(textNode); ``` 完整的代码示例: ```javascript var container = document.getElementById("container"); var selection = window.getSelection(); var range = selection.getRangeAt(0); var node = document.createElement("span"); node.innerHTML = "要插入内容"; range.insertNode(node); ``` 或者: ```javascript var container = document.getElementById("container"); var selection = window.getSelection(); var range = selection.getRangeAt(0); var textNode = document.createTextNode("要插入内容"); range.insertNode(textNode); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值