ホームページ > 記事 > WeChat アプレット > WeChatアプレットで認証コードとパスワード入力ボックス機能を開発する方法
今回はWeChatミニプログラムで認証コードパスワード入力ボックス機能を開発する方法を紹介します WeChatミニプログラムで認証コードパスワード入力ボックス機能を開発する際の
注意事項とは何ですか?以下は実際的なケースです。一緒に見てみましょう。
小さなプログラムを作っていた時、とても簡単だと思って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: 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 サイトの他の関連記事に注目してください。
推奨読書:
バックエンドコードを使用してWeChatアプレットに画像のアップロードを実装する
以上がWeChatアプレットで認証コードとパスワード入力ボックス機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。