vue elemen-ui input选中光标

这篇博客详细介绍了如何在网页中实现一个输入框,该输入框支持选择和插入表情。通过JavaScript获取和设置输入框的光标位置,实现了在用户选择表情后,能将表情准确地插入到光标所在位置的功能。此外,还展示了如何更新表单字段的值以保持数据同步。
摘要由CSDN通过智能技术生成
<el-input v-model="dataForm.content"
                  type="textarea"
                  :autosize="{ minRows: 4}"
                  id="emojiInput"></el-input>
// 选中光标
    makeActive (item, color) {
      var elInput = document.getElementById('emojiInput') // 根据id选择器选中对象
      var startPos = elInput.selectionStart// input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd// 选中的字符到最后的字符
      if (startPos === undefined || endPos === undefined) return
      var txt = elInput.value
      // 将表情添加到选中的光标位置
      var result = txt.substring(0, startPos) + '$(' + item + ')' + txt.substring(endPos)
      elInput.value = result// 赋值给input的value
      // 重新定义光标位置
      elInput.focus()
      elInput.selectionStart = startPos + item.length + 3
      elInput.selectionEnd = startPos + item.length + 3
      this.dataForm.content = result// 赋值给表单中的的字段
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值