이번에는 위챗 미니 프로그램에서 인증코드비밀번호 입력창 기능을 개발하는 방법을 알려드리겠습니다. 위챗 미니 프로그램에서 인증코드 비밀번호 입력창 기능 개발 시 주의사항의
주의사항은 무엇인가요? . 실제 사례를 살펴보겠습니다.
작은 프로그램을 만들 때 6자리 인증코드 입력창을 만들었는데, 작성하면서 여러 가지 저항에 부딪혔고, 온라인에서 얻을 수 있는 정보도 거의 없었습니다. 드디어 가장 만족스러운 계획이 완성되어 모든 분들이 참고하실 수 있도록 여기에 보내드립니다! 1. 렌더링은 다음과 같습니다.
2. 코드 부분
wxml:
<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" formType="submit">Submit</button> </view> </form>
js:
Page({ /** * 页面的初始数据 */ data: { Length:6, //输入框个数 isFocus:true, //聚焦 Value:"", //输入的内容 ispassword:true, //是否密文显示 true为密文, false为明文。 }, Focus(e){ var that = this; console.log(e.detail.value); var inputValue = e.detail.value; that.setData({ Value:inputValue, }) }, Tap(){ var that = this; that.setData({ isFocus:true, }) }, formSubmit(e){ console.log(e.detail.value.password); }, })
wx ss:content{
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 200rpx;
}
iptbox{
width: 80rpx;
height: 80rpx;
border:1rpx solid #ddd;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
ipt{
width: 0;
height: 0;
}
btn-area{
width: 80%;
background-color: orange;
color:white;
}
3. 아이디어 :
1. 입력 상자를 배치하고 텍스트와 위치를 숨기는 동시에 결제 입력 상자(표) 스타일을 설정합니다.
2 입력 상자를 클릭하면 입력 상자를 다음과 같이 설정합니다. 초점이 맞춰진 상태에서 키보드를 깨우고 빈 공간을 클릭하면 초점을 잃습니다. 초점을 잃도록 설정합니다. 스타일은 입력 상자의 너비와 높이가 0이므로 입력 상자와 커서가 표시되거나 숨겨지지 않습니다.
4. 제출 버튼을 클릭했을 때 입력란의 내용입니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
JS 및 PHP 키워드 검색 기능 사용에 대한 자세한 설명
백엔드 코드로 WeChat 애플릿에 이미지 업로드 구현
위 내용은 WeChat 애플릿에서 인증 코드 및 비밀번호 입력 상자 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!