输入光标在输入事件上跳转到输入字段的末尾

Question

我正在尝试在输入事件中将用户输入转换为大写

所以，每当我在输入字段中键入一个键时，我都会遇到以下问题

1. 当用户在中间输入时，光标会跳到输入值的末尾。
2. 最后输入的字符（不是最后一个字符）未转换为大写。

这里是 JS fiddle https://jsfiddle.net/aeL051od/ 的链接以重现问题

new Vue({
  el: "#app",
  data() {
    return {
      input: null
    }
  },
  methods: {
    handleInput(e) {
      this.input = e.target.value ?
        e.target.value.toString().toUpperCase() :
        e.target.value;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="input" @input="handleInput"> {{ input }}
  <!-- {{ input }} is just for reference -->
</div>

Answer 1

{{ event ? event.target.value : null }}在这里显示目标值。

您必须显示转换后的input 值。应该如下所示

 <div id="app">
      <input type="text" v-model="input" @input="handleInput">
      <p>{{ input }}</p>
    </div>

对于光标跳转问题，在开始时获取光标的位置，然后在更新值后将光标设置回起始位置

  handleInput(e) {
          var start = e.target.selectionStart;
            this.input = this.input.toUpperCase()
          this.$nextTick(()=>{
                  e.target.selectionStart = e.target.selectionEnd = start;
                    })
        }

小提琴：https://jsfiddle.net/r53ecug6/

Answer 2

如果您（或 Vue）将新值复制到输入中，则光标将设置到输入的末尾。如果要保留之前的位置，则需要先捕获位置，进行更改，然后在$nextTick 上恢复位置。

还要注意，如果您要在处理程序中设置this.input，那么使用v-model 也是没有意义的。保存event 也不太明智，但您可以。

new Vue({
  el: "#app",
  data() {
    return {
      input: null,
      event: null
    }
  },
  methods: {
    handleInput(e) {
      const el = e.target;
      const sel = el.selectionStart;
      const upperValue = el.value.toUpperCase();

      el.value = this.input = upperValue;
      this.event = e;
      this.$nextTick(() => {
        el.setSelectionRange(sel, sel);
      });
    }
  }
});

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" @input="handleInput">
  <p>{{ event ? event.target.value : null }}</p>
  <p>
    {{input}}
  </p>
</div>

Answer 3

我能够解决您的问题，但您需要在代码中引入一个新变量

HTML：

<div id="app">
   <input type="text" v-model="input" @input="handleInput">
   <p>{{ updated_value }}</p>
</div>

JS：

new Vue({
   el: "#app",
   data() {
       return {
           input: null,
           updated_value: null
       }
   },
   methods: {
       handleInput(e) {
           this.input = e.target.value;
           this.updated_value = e.target.value ? e.target.value.toString().toUpperCase() 
         : e.target.value;
       }
   }
});

Link to fiddle

总结：
1) 使用新变量 (updated_value) 存储输入的大写版本并将其用作 <p> 的值
2) 这样可以保证输入的值不会被更新，从而不会导致光标跳转的问题