vue 添加内容到光标指定位置

这个博客展示了如何在Vue.js应用中实现一个`insertAtCursor`方法,该方法能异步地在textarea的光标位置插入文本。通过获取光标位置并更新textarea的值,然后重新聚焦并设置新的光标位置,实现了文本的动态插入功能。这对于富文本编辑器或类似交互的应用非常有用。
摘要由CSDN通过智能技术生成
    async insertAtCursor(item) {
      var myValue = '{' + item.strvoucherremarkname + '}'
      const myField = this.$refs.textarea.$el.children[0]
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart
        var endPos = myField.selectionEnd
        this.generateForm.strremark = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() // 这句是重点, 圈起来,不加的话后面两步有问题
        myField.focus()
        myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
      } else {
        this.generateForm.strremark += myValue
      }
    }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值