小程序?qū)崿F(xiàn)密碼輸入框
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)密碼輸入框的具體代碼,供大家參考,具體內(nèi)容如下
小程序密碼輸入框
wxml
<view class="Toptitle">請(qǐng)?jiān)O(shè)置支付密碼并妥善保管</view>
<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" type='primary' disabled='{{disabled}}' formType="primary">下一步</button>
</view>
</form>
wxss
/* pages/mima/mima.wxss */
.Toptitle{
text-align: center;
margin: 60rpx auto 46rpx;
font-size: 26rpx;
}
.content{
width: 660rpx;
padding:0 45rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 100rpx;
}
.iptbox{
width: 110rpx;
height: 96rpx;
border:1rpx solid #ddd;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.ipt{
width: 0;
height: 0;
}
.btn-area{
width: 80%;
margin-top: 60rpx;
}
js
Page({
data: {
Length: 6, //輸入框個(gè)數(shù)
isFocus: true, //聚焦
Value: "", //輸入的內(nèi)容
ispassword: true, //是否密文顯示 true為密文, false為明文。
disabled:true,
},
Focus(e) {
var that = this;
console.log(e.detail.value);
var inputValue = e.detail.value;
var ilen = inputValue.length;
if(ilen == 6){
that.setData({
disabled: false,
})
}else{
that.setData({
disabled: true,
})
}
that.setData({
Value: inputValue,
})
},
Tap() {
var that = this;
that.setData({
isFocus: true,
})
},
formSubmit(e) {
console.log(e.detail.value.password);
},
onLoad: function (options) {
},
onShow: function () {
},
})
以上僅供參考,主要方便自己學(xué)習(xí)!
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的效果
這篇文章主要介紹了javascript鼠標(biāo)放上后下邊對(duì)應(yīng)內(nèi)容變換的方法,實(shí)例分析了javascript實(shí)現(xiàn)tab切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JS 實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽的時(shí)候讓其背景更換
點(diǎn)擊a標(biāo)簽的時(shí)候給其換背景的方法有很多,在本文將為大家介紹下js是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過2013-10-10
javascript截取字符串(通過substring實(shí)現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實(shí)現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合,具體代碼如下,感興趣的各位可以參考下哈2013-06-06
js仿京東輪播效果 選項(xiàng)卡套選項(xiàng)卡使用
這篇文章主要為大家詳細(xì)介紹了js仿京東輪播效果,選項(xiàng)卡里套選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下2014-12-12
JavaScript中常見的七種繼承及實(shí)現(xiàn)
JS的繼承方式在我們面試的時(shí)候經(jīng)常會(huì)被問到,所以深入理解js繼承方式以及它們的優(yōu)缺點(diǎn)是非常有必要的。本文為大家整理了JavaScript中常見的七種繼承及實(shí)現(xiàn),需要的可以參考一下2023-03-03

