WeChat 애플릿에서 인증 코드 및 비밀번호 입력 상자 기능을 개발하는 방법

이번에는 위챗 미니 프로그램에서 인증코드비밀번호 입력창 기능을 개발하는 방법을 알려드리겠습니다. 위챗 미니 프로그램에서 인증코드 비밀번호 입력창 기능 개발 시 주의사항의

주의사항

은 무엇인가요? . 실제 사례를 살펴보겠습니다.

작은 프로그램을 만들 때 6자리 인증코드 입력창을 만들었는데, 작성하면서 여러 가지 저항에 부딪혔고, 온라인에서 얻을 수 있는 정보도 거의 없었습니다. 드디어 가장 만족스러운 계획이 완성되어 모든 분들이 참고하실 수 있도록 여기에 보내드립니다! 1. 렌더링은 다음과 같습니다.

2. 코드 부분

wxml:

<form bindsubmit="formSubmit"> 
 <view class=&#39;content&#39;> 
  <block wx:for="{{Length}}" wx:key="item"> 
   <input class=&#39;iptbox&#39; value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input> 
  </block> 
 </view> 
 <input name="password" password="{{true}}" class=&#39;ipt&#39; 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이므로 입력 상자와 커서가 표시되거나 숨겨지지 않습니다.

3. 입력 상자의 최대 단어 수를 제한하고 입력 상자 값의 길이를 입력 상자(테이블)의 내용에 대한 렌더링 조건으로 사용합니다.

4. 제출 버튼을 클릭했을 때 입력란의 내용입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:
JS 및 PHP 키워드 검색 기능 사용에 대한 자세한 설명

백엔드 코드로 WeChat 애플릿에 이미지 업로드 구현

🎜🎜

위 내용은 WeChat 애플릿에서 인증 코드 및 비밀번호 입력 상자 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!