记一次Uniapp的input输入框type为number时还能输入非数字

妄念鹿2026-05-26 15:04

起因

问题的出现是uniapp开发微信小程序后，表单填制人数，使用uniapp的input组件，并设置了type为number，然后测试突然提了bug说没有限制，我赶紧打开手机试了一下真机，弹出数字输入框，完全没问题啊；

随后找测试理论，结果她直接打开电脑微信，用电脑打开小程序，并输入了一串神秘代码，我顿时傻眼；

得出结论，只要非手机的环境，没法只弹出数字输入框，所以限制不住，我想的就是输入事件加上正则匹配替换呗；

js 复制代码

   <input
      class="forms-item-input"
      :value="formData.personNum"
      type="number"
      placeholder="请输入人数"
      @input="handlePersonNumInput"
      placeholder-style="color:#999;font-size:24rpx"
    />

   handlePersonNumInput(e) {
      const value = (e.detail.value || "").replace(/\D/g, "");

      this.$set
        ? this.$set(this.formData, "personNum", value)
        : (this.formData.personNum = value);
    }

想必长期混迹uniapp开发的小伙伴已经知道结果了，页面上看没有失效，在input中加上打印，this.formData.personNum打印出来居然是对的，纯数字；

那就是页面没更新呗，随后就开始了不断的尝试

js 复制代码

  handlePersonNumInput(e) {
      const value = (e.detail.value || "").replace(/\D/g, "");
      this.$set
        ? this.$set(this.formData, "personNum", value)
        : (this.formData.personNum = value);
      e.target.value = value
      e.detail.value = value
    }

还是不生效，这种情况就是代码数据更新了，但是视图不更新；

解决方法

各种搜索，各种问AI最后得到了真正的解决方法；

js 复制代码

    handlePersonNumInput(e) {
      const value = (e.detail.value || "").replace(/\D/g, "");

      this.$set
        ? this.$set(this.formData, "personNum", value)
        : (this.formData.personNum = value);
      return value
    }

不知道大家看到差异没有，就是在@input事件中，return出去最后的值，这样input框就会更新为这个值，不得不说真的太坑了