vue 获取input光标位置,并实现插入模板语法。

点击上面的模板说明，可以在输入框的光标位置插入相应的语法。

          
            
              
 用户名：$Username$
            
            
              
订单号：$OrderId$
            
            
              
订单金额：$Total$
            
          
          
            
              
产品名称：$Product_name$
            
          
        

        
          
        

 

    /**
    *插入模板说明的变量
    */
    makeActive (item) {
      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
      elInput.selectionEnd = startPos + item.length
      this.form.message = result// 赋值给表单中的的字段
    },