JavaScript 模倣 Alipay パスワード入力ボックス_JavaScript スキル

現在、多くの支払いシナリオは携帯電話で行われています。H5 ページの開発がますます便利になるにつれて、多くのシナリオはクライアントからブラウザに移行され、支払いシナリオは非常に自然になっています。ブラウザ。

そこで、今日は JavaScript コードを使用してこの効果を実現します。まず、全体を紹介します。まず、パスワードを入力する桁数を決定します。私の要件は 5 桁で、次に p タグを使用して 5 つの入力タグを囲みます。

そして、これら 5 つの入力に display: inline-block 属性を設定し、 を使用して要素のダイレクトマージン値を削除すると、HTML は次のようになります。 :

<p class="input"> 
<input type="tel" placeholder="随" maxlength=""><!- 
-><input type="tel" placeholder="机" maxlength=""><!- 
-><input type="tel" placeholder="" maxlength=""><!- 
-><input type="tel" placeholder="位" maxlength=""><!- 
-><input type="tel" placeholder="数" maxlength=""> 
</p>

コードでは、入力桁数の最大値を設定する必要があります。そうしないと、そのように見えません~ もちろん、モバイル端末で入力するときに数字キーボードを呼び出すには、 type="tel" を設定する必要もあります。次のステップは CSS スタイルのコードです。具体的なコードはここにあります~

input { 
display: inline-block; 
&:last-child { 
border-right: px solid #; 
} 
input { 
border-top: px solid #; 
border-bottom: px solid #; 
border-left: px solid #; 
width: px; 
height: px; 
outline:none; 
font-family: inherit; 
font-size: px; 
font-weight: inherit; 
text-align: center; 
line-height: px; 
color: #ccc; 
background: rgba(,,,); 
} 
}

次のステップは最も重要な JavaScript 部分です。 >

まず、一番外側の p を監視します。ユーザーが p を選択したことがわかったら、入力のフォーカスをアクティブに設定します。デフォルトでは、このアクティブな数値を入力すると、その値が入ります。正しい数値を入力すると、アクティブが追加され、入力のフォーカスが後方に移動します。これにより、数値を入力して 1 つ後方に移動する機能が完了します。同時に、ユーザーがバックスペース キーをクリックすると、入力ボックスのフォーカスが前に移動するように、入力がフォーカスを失ったときにも削除します。複数のトリガー問題が発生しないように、リスニング イベントがバインドされています。

/** 
* 模拟支付宝的密码输入形式 
*/ 
(function (window, document) { 
var active = , 
inputBtn = document.querySelectorAll('input'); 
for (var i = ; i < inputBtn.length; i++) { 
inputBtn[i].addEventListener(&#39;click&#39;, function () { 
inputBtn[active].focus(); 
}, false); 
inputBtn[i].addEventListener(&#39;focus&#39;, function () { 
this.addEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
inputBtn[i].addEventListener(&#39;blur&#39;, function () { 
this.removeEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
} 
/** 
* 监听键盘的敲击事件 
*/ 
function listenKeyUp() { 
var beginBtn = document.querySelector(&#39;#beginBtn&#39;); 
if (!isNaN(this.value) && this.value.length != ) { 
if (active < ) { 
active += ; 
} 
inputBtn[active].focus(); 
} else if (this.value.length == ) { 
if (active > ) { 
active -= ; 
} 
inputBtn[active].focus(); 
} 
if (active >= ) { 
var _value = inputBtn[active].value; 
if (beginBtn.className == &#39;begin-no&#39; && !isNaN(_value) && _value.length != ) { 
beginBtn.className = &#39;begin&#39;; 
beginBtn.addEventListener(&#39;click&#39;, function () { 
calculate.begin(); 
}, false); 
} 
} else { 
if (beginBtn.className == &#39;begin&#39;) { 
beginBtn.className = &#39;begin-no&#39;; 
} 
} 
} 
})(window, document);

実際、このように整理してみると、全体のエフェクトはまだ非常に単純であることがわかります。必要なのはフォーカスの動きを制御することだけです。コンポーネント全体はまだ CSS スタイルの模倣にあります ~ 結局のところ、JavaScript のロジックには難しいことは何もありません ~ 最後に、皆様に良い新年をお祈りします ~ (*^__^*) ~~

上記のコードは、JavaScript 模倣 Alipay パスワード入力ボックスの全体的な説明を簡単に紹介しています。気に入っていただければ幸いです。