微信小程式 設定input只能輸入數字

2021-09-12 16:31:05 字數 836 閱讀 5669

view如下：

class


="ys-number-input }"


>


type


="number"


auto-focus


focus


='}'


value


="}"


title="


" bindinput


="handleinput"


bindblur


="validate"


maxlength


="11"


placeholder


="請輸入十一位手機號碼..."


placeholder-


style


="font-size


:3vw;


"/>


bindtap


="clear"


hidden


="}"


src="/assets/icon/close.png"


>


image


>


view


>
需求是輸入手機號，設定type為number只能拉起數字鍵盤，並不能限制其只能輸入數字。因此我們需要通過其他的方法來做限制。

為input繫結data中的value值，在input事件中監聽輸入的值。利用正則將其過濾然後重新setdata更新value值，缺點就是輸入非數字的值時介面會閃爍（重渲染）

handleinput


(e))},


validatenumber


(val)


,

微信小程式input

index.wxml 新增檢視 稅前收入 這裡的標籤相當於html裡的div h1 span acronym abbr address等等，詳細在網上另查閱。我在這裡主要是想釐清標籤裡的內容。1.class 型別裡我放置了 area input 2.type 型別裡放置了 number type 可...

微信小程式把玩（十七）input元件

input輸入框使用的頻率也是比較高的。樣式的話自己外面包裹個view自己定義。input屬性也不是很多，有需要自己慢慢測，嘗試 主要屬性 placeholder 請輸入賬號 placeholder style color red bindinput listenerphoneinput view ...

微信小程式把玩（十七）input元件

原文 input輸入框使用的頻率也是比較高的。樣式的話自己外面包裹個view自己定義。input屬性也不是很多，有需要自己慢慢測，嘗試 主要屬性 placeholder 請輸入賬號 placeholder style color red bindinput listenerphoneinput vi...