vue 获取input光标位置,并在光标位置候面添加选中得表情——有效果图

1.定义一个input标签,使用id选择

// id选择 -> 'emojiInput'

  
   ?

// vue 中一个表情得控件

2.选中表情后事件的函数

selectEmoji(emoji) {
      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) + emoji.emoji + txt.substring(endPos)
      elInput.value = result;// 赋值给input的value
      // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + emoji.emoji.length;
      elInput.selectionEnd = startPos + emoji.emoji.length;
      this.model.introduction = result// 赋值给表单中的的字段
    }

3.效果图

vue 获取input光标位置,并在光标位置候面添加选中得表情——有效果图_第1张图片

4. 其实输入法可以直接使用 这个功能完全不用开发

vue 获取input光标位置,并在光标位置候面添加选中得表情——有效果图_第2张图片

avue 获取input光标位置,并在光标位置候面添加选中得表情——有效果图_第3张图片

你可能感兴趣的:(vue,element)