javascript - 输入光标在输入事件时跳转到输入字段的末尾

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

如果您(或 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>