输入事件时，输入光标跳至输入字段的末尾

Question

我正在尝试在输入事件时将用户输入转换为大写因此，每当我在输入字段中键入键时，都会遇到以下问题当用户在中间输入时，光标跳到输入值的末尾。最后键入的字符（不是最后一个字符）不会转换为大写。这是JS小提琴的链接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

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

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;

       }

   }

});

摘要：

1）使用新变量（updated_value）存储输入的大写版本，并将其用作<p>

2的值。这确保输入值不会被更新，从而不会导致游标跳转的问题