작은 프로그램 비밀번호 입력 상자 구현
애플릿 암호 입력 상자
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, //
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 () {
},
})
이상은 참고만 제공하며, 주로 스스로 공부하기 편리하다!여러분에게 현재 관심이 비교적 높은 위챗 소프로그램 강좌 한 편을 추천합니다《위챗 소프로그램 개발 강좌》. 여러분을 위해 정성스럽게 정리한 것이니 마음에 드셨으면 좋겠습니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
위챗 프로그램 개발에서 직면한 몇 가지 사소한 문제를 깊이 있게 분석하다로컬 그림이 표시되지 않으면 개발 도구가 실행되는 것은 문제없지만, 실제 디버깅은 표시되지 않습니다 자세히 관찰한 결과 경로는 문제없다. 문제는 사진 이름이 중국어가 될 수 없다는 것이다. 이를 자모+숫자로 바꾸면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.