Javascript：更改输入值时设置光标位置

Question

我试图在我的应用程序中重现类似于Microsoft Excel / Google表格的UX，当你输入公式时，你有一个自动完成下拉列表，你可以使用不同的公式和变量。

为此，在验证了自动完成后，我希望能够控制光标的位置。

例如，如果我键入= sum（variable1，variable2），则在变量2的自动完成时，光标应该在最后一个括号之前，而不是在最后。

我理解如何用javascript设置光标的位置，问题是我同时修改了输入的值并设置了光标位置，后者不起作用。

我用一个更简单的语境重复了这个问题：https://jsfiddle.net/joparisot/j8ourfa1/31/

我的HTML：

<div id="app">
    <autocomplete v-model="selection"></autocomplete>
</div>

<template id="autocomplete">
  <div>
    <h2>gernerogrnio</h2>
    <input id="my-input" 
           class="form-control" 
           type="text" 
           :value="value"
           @keydown.enter="updateValue($event.target.value)">
    <p>{{ value }}</p>
  </div>
</template>

我的剧本：

    Vue.component('autocomplete', {
    template: '#autocomplete', 
  props: {
    value: {
      type: String,
      required: true
    }
  }, 
  methods: {
    updateValue (value) {
        var new_value = ''
      if (value.length < 4) {
        new_value = 'Inferior'
      } else {
        new_value = 'Superior'
      }

      this.$emit('input', new_value)
      var myInput = document.getElementById('my-input');
      this.setCaretPosition(myInput, 5)
    }, 
    setCaretPosition(ctrl, pos) {
        ctrl.focus();
        ctrl.setSelectionRange(pos, pos);
    }
  }
});

new Vue({
    el: '#app', 
  data: {
    selection: 'test'
  }
});

我不打扰自动完成功能，但根据您键入的内容，当您按Enter键时，输入将填充新值。您可以看到，如果您对第11到16行进行注释并将new_value设置为value，则设置光标位置将起作用。

我似乎无法同时做这两件事。有什么想法吗？

Answer 1

感谢Roy J的评论，我找到了解决方案。

在updateValue函数中添加以下内容：

this.$nextTick(() => {
  this.setCaretPosition(myInput, 5)
});

Answer 2

我从这个问题中了解了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。按退格键时，第一个条件的目标是不运行正则表达式。在我看来，这是更好的用户体验。如果你注释掉那个条件，你可以看到。

第二个if块处理编辑事件。测试它的一个好方法是输入一个有效的CC，但省略第三个字符，这样一切都是一个。然后添加角色。一切都应该是好的。同样，如果您退出多个字符。第二个条件的目标是正确管理光标位置（如果您更喜欢该命名法，则为插入符号位置）。

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

Answer 3

我找到了解决这个问题的简单方法，在IE和Chrome中测试100％

在每次按键时调用此功能

function setCaret(eleId)
 {
   var mousePosition = $(elemId)[0].selectionStart;
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(mousePosition + 1, mousePosition + 1);
 }

将文本框id传递给此功能，该功能将找到鼠标位置并按下每个按键的插入符号