微信小程序多位驗證碼輸入框
發(fā)布時間：2021-07-01 08:54 所屬欄目：小程序開發(fā)教程
實現(xiàn)思路：
1、放置一個輸入框，隱藏其文字和位置，同時設(shè)置支付輸入框（表格）樣式
2、當(dāng)點擊輸入框時設(shè)置輸入框為聚焦?fàn)顟B(tài)，喚起鍵盤，點擊空白處，失去焦點，設(shè)為失去焦點樣式，因為輸入框?qū)捀邽?，所以不會顯示輸入框和光標(biāo)，實現(xiàn)隱藏。
3、限制輸入框最大字?jǐn)?shù)并且監(jiān)聽輸入框狀態(tài)，以輸入框值的長度作為輸入框（表格）內(nèi)容的渲染條件
4、點擊提交按鈕時，獲取輸入框內(nèi)容。
一、效果圖如下：
二、代碼部分
1、wxml：
<form bindsubmit="formSubmit">
<view class='content'>
<block wx:for="{{Length}}" wx:key="item">
<input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'> </input>
</block>
</view>
<input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
<view>
<button class="btn-area" formType="submit">Submit</button>
</view>
</form>
|
2、js:
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
Length:6, //輸入框個數(shù)
isFocus:true, //聚焦
Value:"", //輸入的內(nèi)容
ispassword:true, //是否密文顯示 true為密文， false為明文。
},
Focus(e){
var that = this;
console.log(e.detail.value);
var inputValue = e.detail.value;
that.setData({
Value:inputValue,
})
},
Tap(){
var that = this;
that.setData({
isFocus:true,
})
},
formSubmit(e){
console.log(e.detail.value.password);
},
})
|
3、wxss:
content{
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 200rpx;
}
iptbox{
width: 80rpx;
height: 80rpx;
border:1rpx solid #ddd;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
ipt{
width: 0;
height: 0;
}
btn-area{
width: 80%;
background-color: orange;
color:white;
}
|
