Question

我一直试图在textarea中准确插入光标所在的表情符号。我在网上查看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的解决方案。

Answer 1

两个步骤：

使用vue-way获取Sub openworkbook() Workbooks.Open ("C:\Users\kjayachandiran\Desktop\ACUITY CF 1204-1210.xls") Worksheets(2).Activate Cells.Select Selection.Copy Workbooks.Open ("C:\Users\kjayachandiran\Desktop\New-Manjunath.xlsx") Worksheets(1).Activate Range("A1").Select ActiveSheet.Paste Workbooks(3).Save Workbooks(2).Close ActiveWorkbook.Activate Worksheets(1).Activate Cells(1, 1).Select Range("A366655").Value = Application.WorksheetFunction.CountIf(Columns(9), "=" & "XD") End Sub元素：

1.1在模板代码中将textarea attrbute添加到ref代码：

textarea

1.2在此组件的<textarea ref="ta"></textarea>挂钩后获取此元素：

mounted

2获取let textarea = this.$refs.ta元素的光标位置。

textarea

以下是参考：ref

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);
}

Answer 3

我从另一个问题中学到了setSelectionRange，并用它来处理信用卡号输入。我将在这里展示我的解决方案，以便一个人可能会因此受到启发。

模板：

<input
    ref="input"
    v-model="value"
    @input="handleChange"
>

实例方法：

data() {
    return {
        lastValue: '',
    }
},

methods: {
    setCursorPosition(el, pos) {
        el.focus();
        el.setSelectionRange(pos, pos);
    },
    handleChange() {
        // handle backspace event
        if (this.value.length < this.lastValue.length) {
            this.lastValue = this.value;
            this.$emit('input-changed', this.value);
            return;
        }
        // handle value-edit event
        if (this.$refs.input.selectionStart < this.value.length) {
            const startPos = this.$refs.input.selectionStart;
            this.value = this.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim();
            this.$nextTick(() => this.setCursorPosition(this.$refs.input, startPos));
            this.lastValue = this.value;
            this.$emit('input-changed', this.value);
            return;
        }
        // handle everything else
        this.value = this.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim();
        this.lastValue = this.value;
        this.$emit('input-changed', this.value);
    },
},

上述代码的目标是在信用卡输入中添加空格，因此1234123412341234会自动重新格式化为1234 1234 1234 1234。冒险进入该区域的人会注意到在编辑输入值时会出现问题。

您可以在上面的示例中看到三个条件。最后一个是默认值，它使用两步组合简单地重新格式化当前值：删除所有空格，然后每第4个字符添加一个空格。

如果注释掉两个if块，则可以看到问题的出现。

第一个if块处理退格事件。如您所见，每次输入更改时，该值都会捕获为this.lastValue。当您按退格键时，第一个条件的目标是不运行正则表达式。我认为，这是更好的UX。如果您注释掉这种情况，您可以看到。

第二个if块处理编辑事件。测试它的一个好方法是输入一个有效的抄送，但忽略第三个字符，以便所有内容都一个掉。然后添加角色。一切都应该很好。同样，如果退格多个字符。第二个条件的目标是正确管理光标位置（如果希望使用术语，则可以插入符号的位置）。

您可以安全地删除第一个条件以及对lastValue的所有引用，该代码仍然可以使用。可以说这是更简单但更糟糕的用户体验。

在VUE JS中的Cursor位置插入字符

3 个答案: