如何为输入设置 onkeyup 事件答案

【问题标题】：How to set onkeyup event for input如何为输入设置 onkeyup 事件
【发布时间】：2021-09-30 09:00:37
【问题描述】：

我有 GET 请求方法，它调用了产品的最大数量。

data() {
    return {
      itemMaxQty: ''
    }
  },

methods: {
   setMaxItem(event) {
       const value = event.target.value;
       console.log('value', value);
       if(value > this.maxItemQty) {
          value = this.maxItemQty
       } else if(value < 0) {
         value = 0
       }
   },

    maxItem(){

    let item_id = this.itemID;
                        
      axios.get("./available/" + item_id).then((response) => {
        console.log('maxItem', response.data); \\output: maxItem 9
        this.maxItemQty = response.data;
      })
    }
  }

如何设置onKeyUp属性，当用户输入数量超过maxItem时，输入值会自动改变=maxItem值？

<input
  type="number"
  min="1"
  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
  name="quantity" 
  id="quantity" 
  class="form-control" 
  placeholder="1" 
  value="1" 
  @keyUp="setMaxItem()"
>

【问题讨论】：

你为什么不设置:max="maxItemQty"
因为我需要确保当用户尝试输入超过maxItemQty 的值时，该值将自动强制更改为最大值@JuanEizmendi

标签： javascript laravel vuejs2 onkeyup onkeypress

【解决方案1】：

请试试这个代码

<input
  type="number"
  min="1"
  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
  name="quantity" 
  id="quantity" 
  class="form-control" 
  placeholder="1" 
  value="1" 
  onkeyup="setMaxItem()"

【讨论】：

【解决方案2】：

最简单的方法是创建一个watcher，首先你需要做一个v-model，它会绑定输入元素值和响应式vue数据

<input
    type="number"
    min="1"
    name="quantity" 
    id="quantity" 
    class="form-control" 
    placeholder="1"
    v-model="inputedNumber"
>

然后在数据中创建相同的属性

data() {
    return {
        itemMaxQty: '',
        inputedNumber: 1,
    }
},

现在我们可以创建一个观察者

watch: {
    inputedNumber(newValue) {
        this.setMaxItem().then(() => {
            if (newValue > this.maxItemQty) {
                this.inputedNumber = this.maxItemQty
            }
        })
    }
}

【讨论】：

【解决方案3】：

我想对@ZloiGoroh 发表评论，但我没有足够的积分。

我在代码setMaxItem 中没有看到返回承诺。而且我不认为这个想法是在每次按键时调用 api 来确定@987654324@。如果是这样，我仍然不建议这样做。

由于问题也有计算最小值的代码，所以我会更改观察者的实现：

inputedNumber(newValue) {
  if (newValue > this.maxItemQty) {
    this.inputedNumber = this.maxItemQty
  } else if (newValue < 0) {
    this.inputedNumber = 0;
  }
}

或者只用Math.min() 和Math.max() 钳制值。

watch: {
  inputedNumber(newValue) {
    /* 
      Math.max -> returns the highest of the two
      Math.min -> returns the lowest of the two
      the lowest number allowed is 0
      the heighest number is either the newValue 
      or if that value is heigher than maxItemQty maxItemQty itself
    */

    this.inputedNumber = Math.max(0, Math.min(newValue, this.maxItemQty)
  }
}

有些人可能会争论 inputedNumber 即使值在最小值和最大值之间，也总是会更新，但这种原因导致的性能损失可以忽略不计，甚至不为零。

即使问题出在按键上，在你的情况下我也不会走那条路。

ps。我唯一的目的是提供一个最小的解决方案，而不是去命名和/或重构最佳实践的答案

【讨论】：