【小程序】field输入框设置type=number不生效

最新推荐文章于 2024-05-22 10:34:30 发布

左手喵子

最新推荐文章于 2024-05-22 10:34:30 发布

阅读量467

点赞数 3

分类专栏：微信小程序文章标签：小程序 apache 前端

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136065608

版权

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

39 篇文章 1 订阅

订阅专栏

本文介绍了如何在小程序的field输入框中使用number类型限制数字输入，以及如何通过正则校验防止无关字符输入。然而，提到这种方法可能导致鼠标闪烁问题未解。

摘要由CSDN通过智能技术生成

众所周知，在小程序field输入框中有个type属性，设置为number就能限制数字类型，但是切记，效果需要到手机上进行验证，开发者工具上是看不到效果的，而且它做到的也仅仅是调起数字输入键盘，假如用户强行切换键盘，同样是可以输入字母汉字等的。

那么想要用户在输入框中无法输入无关字符，可以加入一段正则校验即可：

  <van-field
    label="¥"
    type="number"
    clearable="true"
    value="{{ outMoney }}"
    placeholder="0.00"
    input-align="left"
    bind:change="onChange"
  /> 
  // 监听输入框数值改变
  onChange(event){
    console.log("输入框值：",event.detail);
    let value = event.detail.replace(/^\D./g, '')
    this.setData({
      outMoney:value  
    })
  },

但是这样会有鼠标闪烁的情况无法解决。