小程序?qū)崿F(xiàn)密碼輸入框
更新時(shí)間：2020年11月16日 10:04:51 作者：JSN___不像碼農(nóng)的碼農(nóng)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)密碼輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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ā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript手寫源碼之omit函數(shù)的實(shí)現(xiàn)
最近突然有個(gè)新的想法，想去看看前端的小庫來提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了，那就實(shí)現(xiàn)一個(gè)omit函數(shù)吧2023-02-02
Bootstrap modal 多彈窗之疊加顯示不出彈窗問題的解決方案
Bootstrap modal 多彈窗之疊加顯示不出彈窗問題，今天小編抽時(shí)間給大家分享下解決方案，需要的朋友參考下2017-02-02
在很多現(xiàn)實(shí)的場(chǎng)景中，有的文本框我們希望在選擇“是”的按鈕之后才出現(xiàn)，這就需要js控制TR的隱藏和顯示，如何控制，本文為大家揭曉2016-03-03
在JavaScript的世界里,作用域可以分為三種,分別是全局作用域,函數(shù)作用域,塊級(jí)作用域,本文主要來和大家聊聊JS中塊級(jí)作用域的相關(guān)知識(shí),感興趣的可以了解下2023-09-09
微信sdk實(shí)現(xiàn)禁止微信分享(使用原生php實(shí)現(xiàn))
這篇文章主要介紹了微信sdk實(shí)現(xiàn)禁止微信分享(使用原生php實(shí)現(xiàn))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家分享了純javascript響應(yīng)式樹形菜單效果的簡單教程，對(duì)多級(jí)目錄樹形菜單感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑欄過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框
本文介紹了如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框，感興趣的同學(xué)，可以參考下，并且試驗(yàn)一下。2021-06-06
JS使用window.requestAnimationFrame()對(duì)列表切片進(jìn)行渲染
這篇文章主要為大家介紹了JS使用requestAnimationFrame對(duì)列表切片進(jìn)行渲染，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03