小程序實現(xiàn)密碼輸入框
更新時間:2020年11月16日 10:04:51 作者:JSN___不像碼農(nóng)的碼農(nóng)
這篇文章主要為大家詳細介紹了小程序實現(xiàn)密碼輸入框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序實現(xiàn)密碼輸入框的具體代碼,供大家參考,具體內容如下
小程序密碼輸入框
wxml
<view class="Toptitle">請設置支付密碼并妥善保管</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, //輸入框個數(shù) isFocus: true, //聚焦 Value: "", //輸入的內容 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 () { }, })
以上僅供參考,主要方便自己學習!
為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript實現(xiàn)鼠標放上后下邊對應內容變換的效果
這篇文章主要介紹了javascript鼠標放上后下邊對應內容變換的方法,實例分析了javascript實現(xiàn)tab切換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08javascript截取字符串(通過substring實現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實現(xiàn)如標題所示的截取字符串并支持中英文混合,具體代碼如下,感興趣的各位可以參考下哈2013-06-06JavaScript實現(xiàn)網(wǎng)頁留言板功能
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁留言板功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11用js代碼和插件實現(xiàn)wordpress雪花飄落效果的四種方法
這篇文章主要介紹了用js代碼和插件實現(xiàn)wordpress雪花飄落效果的四種方法,需要的朋友可以參考下2014-12-12