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


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的bindblur事件改变input的value,首次有效,第二次以上则无效_第1张图片

 

最后更新代码如下


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();
},

你可能感兴趣的:(微信小程序)