微信小程序 - 设置input只能输入数字

最新推荐文章于 2024-08-26 14:29:06 发布

csu_zipple

最新推荐文章于 2024-08-26 14:29:06 发布

阅读量3.7w

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/csu_passer/article/details/88584126

版权

微信小程序专栏收录该内容

24 篇文章 2 订阅

订阅专栏

需求

view如下：

<view class="ys-number-input {{error?'error':''}}">
    <input type="number" auto-focus focus='{{focus}}' value="{{value}}" title="" bindinput="handleInput" bindblur="validate" maxlength="11" placeholder="请输入十一位手机号码..." placeholder-style="font-size:3vw;"/>
    <image bindtap="clear" hidden="{{!showClose}}" src="/assets/icon/close.png"></image>
  </view>

需求是输入手机号，设置type为number只能拉起数字键盘，并不能限制其只能输入数字。因此我们需要通过其他的方法来做限制。

正则

为input绑定data中的value值，在input事件中监听输入的值。利用正则将其过滤然后重新setData更新value值，缺点就是输入非数字的值时界面会闪烁（重渲染）

handleInput(e) {
      let value = this.validateNumber(e.detail.value)
      this.setData({
        value
      })
    },
validateNumber(val) {
      return val.replace(/\D/g, '')
    },