【小程序】input的bindblur事件改变input的value，首次有效，第二次以上则无效

<input value='{{orderForm.amount}}' type='number' min='{{min}}' max='99999' bindblur='bindblur'/>

bindblur(e){
  let val = parseInt(e.detail.value);
  if (val<=99999 && val>=this.min) {
    this.orderForm.amount = val;
  }else if(val>99999){
    this.orderForm.amount = 99999;
  }else{
    this.orderForm.amount = this.min;
  }
  this.$apply();
},

代码如上，想实现当用户输入数据时，input失焦事件，判断用户输入的数值是否在有效区间。

如果大于最大值，则input框的value变为99999，

如果小于最小值，input框的value变为min（1000）

测试时，首次输入数值大于99999时，失焦后视图能马上更新为99999，但再次输入大于99999时，视图就无法更新了。最小值也是同理。

 

查看小程序API文档，input的value绑定的是输入框的初始内容。当输入框输入的时候，value 值并没有改变，所以得绑定一个bindinput事件，将每次输入的值赋值给 value。

 

最后更新代码如下

<input class='secondary-text' value='{{orderForm.amount}}' type='number' min='{{min}}' max='99999' bindblur='bindblur' bindinput='bindinput'/>

bindinput(e){
  this.orderForm.amount = e.detail.value;
  this.$apply();
},
bindblur(e){
  let val = parseInt(e.detail.value);
  if (val<=99999 && val>=this.min) {
    this.orderForm.amount = val;
  }else if(val>99999){
    this.orderForm.amount = 99999;
  }else{
    this.orderForm.amount = this.min;
  }
  this.$apply();
},