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

需求

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, '')},

微信小程序 - 设置input只能输入数字相关推荐

微信小程序中 input空间输入文字如何清空
场景:希望读取input控件的输入内容之后,清空输入框的内容.由于本人是JS小白,整整花了一两个小时都没找到方法. 原来微信小程序不支持document通过id获取控件的方法,尽管编译不报错,但是实际 ...
设置input只能输入数字
方法一将标签中的type属性直接设置为number就可以达到只能输入数字.但是这个方式有一个缺点,它只能作用于网页端,在手机输入的话还是可以输入汉字或英文方法二还是一样在标签上设置,代码 ...
vue 设置input只能输入数字
方法一: 将<input>标签中的type属性直接设置为number就可以达到只能输入数字.优点:他直接能唤起数字键盘,缺点:它只能作用于网页端,在手机输入的话还是可以输入汉字或英 ...
设置input只能输入数字或小数（保留一位小数）
代码块可直接使用: function onlyNonNegative(obj) {//清除"数字"和"."以外的字符obj.value = obj.value. ...
微信小程序设置input框placeholder的字体大小
一.绑定属性给input框绑定 placeholder-class="placeholder-style"这个属性. <input placeholder="请输 ...
微信小程序获取input输入的值
微信小程序获取input输入的值 view <view><text>姓名:</text><input type='text' name="user ...
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空问题描述 1.我在页面上有个倒计时的功能,每一秒都在更新时间,更新时间显示的值(view一直变) 2.我调用input输入框,准 ...
微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,有效值:text,number,idcard,dig ...
小程序中里的bindinput_微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 valueString 输入框的内容 typeStringtextinput的类型,有效值:text,number,idcard,digit,time ...

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

需求

正则

微信小程序 - 设置input只能输入数字相关推荐

最新文章

热门文章