微信小程序多位驗證碼輸入框
發布時間：2021-07-01 08:54 所屬欄目：小程序開發教程
實現思路：
1、放置一個輸入框，隱藏其文字和位置，同時設置支付輸入框（表格）樣式
2、當點擊輸入框時設置輸入框為聚焦狀態，喚起鍵盤，點擊空白處，失去焦點，設為失去焦點樣式，因為輸入框寬高為0，所以不會顯示輸入框和光標，實現隱藏。
3、限制輸入框最大字數并且監聽輸入框狀態，以輸入框值的長度作為輸入框（表格）內容的渲染條件
4、點擊提交按鈕時，獲取輸入框內容(rong)。
一、效果圖如下：
二、代碼部分
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({
/**
* 頁面的初始數據
*/
data: {
Length:6, //輸入框個數
isFocus:true, //聚焦
Value:"", //輸入的內容
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;
}
|
易優小程序（企(qi)業版）+靈(ling)活api+前后代碼(ma)開(kai)源
碼云倉庫:
本文地址：//www.jinyoudianli.com/wxmini/doc/course/26868.html 復制鏈接
如需定制(zhi)請聯系易優客服咨詢：
