小程序?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)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(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-08JS 實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽的時(shí)候讓其背景更換
點(diǎn)擊a標(biāo)簽的時(shí)候給其換背景的方法有很多,在本文將為大家介紹下js是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-10-10javascript截取字符串(通過(guò)substring實(shí)現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實(shí)現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合,具體代碼如下,感興趣的各位可以參考下哈2013-06-06js仿京東輪播效果 選項(xiàng)卡套選項(xiàng)卡使用
這篇文章主要為大家詳細(xì)介紹了js仿京東輪播效果,選項(xiàng)卡里套選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01JavaScript實(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-12JavaScript中常見(jiàn)的七種繼承及實(shí)現(xiàn)
JS的繼承方式在我們面試的時(shí)候經(jīng)常會(huì)被問(wèn)到,所以深入理解js繼承方式以及它們的優(yōu)缺點(diǎn)是非常有必要的。本文為大家整理了JavaScript中常見(jiàn)的七種繼承及實(shí)現(xiàn),需要的可以參考一下2023-03-03