WeChatアプレットで認証コードとパスワード入力ボックス機能を開発する方法

今回はWeChatミニプログラムで認証コードパスワード入力ボックス機能を開発する方法を紹介します 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: reee

wx ss:

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); 
 }, 
})

3. アイデア:

1. 入力ボックスを配置し、そのテキストと位置を非表示にし、同時に支払い入力ボックス (テーブル) のスタイルを設定します。
2. 入力ボックスをクリックすると、入力ボックスを に設定します。フォーカスされた状態、キーボードを起動し、空白部分をクリックし、フォーカスを失うと、フォーカスを失うスタイルに設定されます。入力ボックスの幅と高さが 0 であるため、入力ボックスとカーソルは表示も非表示もされません。
3. 入力ボックスの最大単語数を制限し、入力ボックスの値の長さを入力ボックスのコンテンツ (テーブル) のレンダリング条件として使用します。送信ボタンをクリックしたときの入力ボックスの

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSおよびPHPのキーワード検索機能の使用方法の詳細な説明

バックエンドコードを使用してWeChatアプレットに画像のアップロードを実装する

以上がWeChatアプレットで認証コードとパスワード入力ボックス機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。