本文實例為大家分享了小程序實現密碼輸入框的具體代碼,供大家參考,具體內容如下
小程序密碼輸入框
wxml
1
2
3
4
5
6
7
8
9
10
11
12
|
< 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
/* pages/mima/mima.wxss */ .Toptitle{ text-align : center ; margin : 60 rpx auto 46 rpx; font-size : 26 rpx; } .content{ width : 660 rpx; padding : 0 45 rpx; display : flex; justify- content : space-around; align-items: center ; margin-top : 100 rpx; } .iptbox{ width : 110 rpx; height : 96 rpx; border : 1 rpx 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 : 60 rpx; } |
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
Page({ data: { Length: 6, //輸入框個數 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 () { }, }) |
以上僅供參考,主要方便自己學習!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。
原文鏈接:https://blog.csdn.net/JSN___/article/details/109489321