在 VUE JS 的 Cursor 位置插入字符

Question

我一直在尝试在光标所在的文本区域中准确插入表情符号。我环顾四周 how tos 在网上找不到 VUE JS 中的任何特定内容。他们中的大多数都是纯 JS。

我有这个代码

<div class="picker" v-show="showPicker">
    <click-outside :handler="handleClickOutside">
        <picker
            set ="messenger"
            title="Pick your emoji…"
            emoji="point_up"
            @click="addEmoji"
            :emoji-size="16"
        >
        </picker>
    </click-outside>
</div>

<textarea id="greeting_text_input" class="form-control"
    type="text"
    v-model="greeting_text"
    rows="8"
    required
    placeholder="Hi {first-name}! Welcome to our bot. Click on the ‘Get
    Started’ button to begin
">
</textarea>

我的方法

addEmoji(emoji){
        this.greeting_text += emoji.native;
        this.showPicker = !this.showPicker;
    }

显然，这段代码会将字符（在我的例子中是表情符号）添加到字符串的最后。为此，我需要一个纯 vuejs 解决方案。 Vue 中此类问题的最佳实践是什么？因为网络上很少有基于 vanilla JS 或 Jquery 的解决方案。

原文由 Prajwol Onta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两个步骤：

1 使用 vue 方式获取 textarea 元素：

1.1 添加 ref 属性到模板代码中的 textarea 标签：

 <textarea ref="ta"></textarea>

1.2 在这个组件的 mounted 钩子之后得到这个元素：

 let textarea = this.$refs.ta

2 获取 textarea 元素的光标位置。

 let cursorPosition = textarea.selectionStart

这是参考： 参考

原文由 grantonzhuang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<!-- tag -->
<textarea ref="yourTextarea" v-model.trim="txtContent" ......></textarea>

 // methods:
insertSomething: function(insert) {
  const self = this;
  var tArea = this.$refs.yourTextarea;
  // filter:
  if (0 == insert) {
    return;
  }
  if (0 == cursorPos) {
    return;
  }

  // get cursor's position:
  var startPos = tArea.selectionStart,
    endPos = tArea.selectionEnd,
    cursorPos = startPos,
    tmpStr = tArea.value;

  // insert:
  self.txtContent = tmpStr.substring(0, startPos) + insert + tmpStr.substring(endPos, tmpStr.length);

  // move cursor:
  setTimeout(() => {
    cursorPos += insert.length;
    tArea.selectionStart = tArea.selectionEnd = cursorPos;
  }, 10);
}

原文由 PHPJungle 发布，翻译遵循 CC BY-SA 3.0 许可协议