Question

我在输入数字字段上有以下代码：

<input class="quantity_container" v-model="length.quantity" 
    type="number" pattern="[0-9]*" inputmode="numeric" 
    onfocus="if (this.value == '0') this.value = '';"/>

如果在切换到其中包含“0”的新输入字段之前没有其他输入字段处于焦点，则清除该字段的代码将起作用。该页面有许多输入字段，遗憾的是我无法按名称访问它们。我已经检查过并且调用了onfocus，但是当它为'0'并且将焦点从一个输入字段移动到另一个输入字段时，该字段永远不会被清除。

如果我轻拍并取消对最后一个输入字段的焦点，然后将焦点放在新输入字段上，则只会清除。

非常感谢任何帮助。

Answer 1

使用onblur清除字段，当字段失去焦点时会发生模糊事件。在你的情况下，它将像

<input class="quantity_container" v-model="length.quantity" 
    type="number" pattern="[0-9]*" inputmode="numeric" 
    onblur="if (this.value == '0') this.value = '';"/>

如果输入字段在页面加载时的值为0，则可以将其清除为

$(document).ready(function() {
$('input[value="0"]').val('');
});

Answer 2

我通过创建custom input component来实现这一点。例如

Vue.component('quantity-input', {
  template: '<input type="number" class="quantity_container" inputmode="numeric" ref="input" :value="value" @input="updateValue($event.target.value)" />',
  props: ['value'],
  methods: {
    updateValue: function(value) {
      var formattedValue = value == 0 ? '' : value
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      this.$emit('input', formattedValue)
    }
  }
})

然后您可以简单地使用

<quantity-input v-model="length.quantity"></quantity-input>

Javascript清除输入字段，将焦点从一个输入字段移动到另一个输入字段

2 个答案: