javascript - 为什么我选择/突出显示的输入文本不会一直触发输入事件？

Question

我创建了一个具有以下行为的 4 针字段：当一个字段被填充时，焦点转移到下一个字段（光标切换到下一个输入字段）。删除文本值时，该输入字段中的文本将被删除，光标移动到其前面的 pin 字段。

问题是有时当一个带有文本的字段被突出显示时（例如在删除之后），并且键入另一个键来覆盖以前的值（如果发生错误），input事件不会被触发，光标仍然在那个字段（光标不会移动到下一个引脚字段）。这显然不会带来很好的用户体验，我想让它在突出显示的文本被覆盖时始终切换 pin 字段。

代码的相关部分发布在下面。

data() {
  return {
    focusIndex: 1,
    inputOne: '',
    inputTwo: '',
    inputThree: '',
    inputFour: '',
    numberOfPinFields: 4,
  };
},

mounted() {
// this highlights the first pin field
  this.$refs[this.focusIndex].focus();
},

methods: {
  handlePinFieldDeletion() {
    if (this.focusIndex > 1) {
      this.focusIndex -= 1;
    }
  },
  
  handlePinFieldInput(value, maxNumberOfFields) {
    this.$nextTick(() => {
     // after the focus index from the input field watch below is updated, increase the focusIndex value
       if (value.length === 1 && this.focusIndex < maxNumberOfFields) {
          this.focusIndex += 1;
        }
      });
    },
  ensurePinFieldHasOneInput(value) {
    return value.slice(0, 1);
  },
  highlightOnFocus(e, focusIndex) {
    // highlight the text
    e.target.select();
    // set the new focus index
    this.focusIndex = focusIndex;
  },
 }
 
 watch: {
  focusIndex(newValue) {
    this.$refs[newValue].focus();
  },
  inputOne(newValue) {
    // set focus index of first otp input field to 1 when it changes.
    // This will help with situations where the user doesn't use the input fields in numerical order
    this.focusIndex = 1;
    this.inputOne = this.ensurePinFieldHasOneInput(newValue);
  },

  inputTwo(newValue) {
  // set focus index of first otp input field to 2 when it changes.
  // This will help with situations where the user doesn't use the input fields in numerical order
    this.focusIndex = 2;
    this.inputTwo = this.ensurePinFieldHasOneInput(newValue);
  },

  inputThree(newValue) {
  // set focus index of first otp input field to 3 when it changes.
  // This will help with situations where the user doesn't use the input fields in numerical order
    this.focusIndex = 3;
    this.inputThree = this.ensurePinFieldHasOneInput(newValue);
  },
  inputFour(newValue) {
    // set focus index of first otp input field to 4 when it changes.
    // This will help with situations where the user doesn't use the input fields in numerical order
    this.focusIndex = 4;
    this.inputFour = this.ensurePinFieldHasOneInput(newValue);
  },
  },

<form>
  ...
  <q-input
    type="password"
    input-class="text-center"
    maxlength="1"
    @keyup.delete="handlePinFieldDeletion"
    @input="handlePinFieldInput($event, numberOfPinFields)"
    v-number-only
    @focus="highlightOnFocus($event, 1)"
    borderless
    ref="1"
    v-model="inputOne"
  />
  <q-input
        type="password"
        input-class="text-center"
        maxlength="1"
        v-number-only
        @focus="highlightOnFocus($event, 2)"
        @keyup.delete="handlePinFieldDeletion"
        @input="handlePinFieldInput($event, numberOfPinFields)"
        borderless
        ref="2"
        v-model="inputTwo"
      />
      <q-input
        type="password"
        input-class="text-center"
        maxlength="1"
        v-number-only
        @focus="highlightOnFocus($event, 3)"
        @keyup.delete="handlePinFieldDeletion"
        @input="handlePinFieldInput($event, numberOfPinFields)"
        borderless
        ref="3"
        v-model="inputThree"
      />
      <q-input
        type="password"
        input-class="text-center"
        v-number-only
        @focus="highlightOnFocus($event, 4)"
        maxlength="1"
        @keyup.delete="handlePinFieldDeletion"
        @input="handlePinFieldInput($event, numberOfPinFields)"
        borderless
        ref="4"
        v-model="inputFour"
      />
  ...
</form>

标签： javascriptvue.jsdom-eventsquasar-framework

Answer 1

我做了一些测试，当用相同的值覆盖时，我在手表中看到了错误，即字段 1 突出显示了 5 并再次更新了 5。

代码：

 watch: {
  focusIndex(newValue) {
    this.$refs[newValue].focus();
  },
  inputOne(newValue) {
    this.$q.notify({
        message: 'inputOne changed',
        caption: 'moments ago',
        color: 'secondary'
      })