Javascript:更改输入值时设置光标位置 [英] Javascript: Set cursor position when changing the value of input

问题描述

当您键入公式时，我尝试在我的应用程序中重现类似于Microsoft Excel/Google表格的UX，并且您可以使用不同的公式和变量的自动完成下拉菜单.

I am trying to reproduce in my app a UX similar to Microsoft Excel / Google Sheets when you type of formula and you have an autocomplete dropdown for the different formulas and variables you have at your disposal.

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

For that purpose, after having validated the autocomplete, I want to be able to control the position of the cursor.

例如，如果我输入= sum(variable1，variable2)，则在自动完成variable2时，光标应位于最后一个括号之前，而不是最末尾.

For exemple, if I type =sum(variable1, variable2), on autocomplete of variable2, cursor should be before the last parenthesis and not at the very end.

我了解如何使用javascript设置光标的位置，问题在于，因为我同时修改了输入的值并设置了光标位置，所以后者不起作用.

I understand how to set the position of the cursor with javascript, the problem is since at the same time I modify the value of the input and set the cursor position, the latter doesn't work.

我用一个简单的上下文重现了这个问题: https://jsfiddle.net/joparisot/j8ourfa1/31/

I reproduced on fiddle the problem with a simpler context: 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，则可以设置光标位置.

I don't bother there with the autocomplete, but depending on what you type, when you press enter, the input will be filled with a new value. You can see that if you comment lines 11 to 16 and just set new_value to value, then setting the cursor position will work.

我似乎无法同时做两件事.有什么想法吗?

I can't seem to be able to do both things at the same time. Any thoughts?

推荐答案

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

Thanks to Roy J's comment, I was able to find the solution.

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

Add the following in the updateValue function:

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

这篇关于Javascript:更改输入值时设置光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！