JSに基づいてAlipayに似た支払いパスワード入力ボックスを実装する

この記事では、Alipayの支払いパスワードに似たインターフェイスを実装します。これは、数字のみを入力でき、6桁のみを入力できます。

まず、レンダリングをお見せしましょう。気分が良い場合は、実装コードを参照してください。

1。スタイルシート

.Wrap {マージン：10px auto; width：329px; height：640px; padding-top：200px;}。inputboxContainer {width：240px; height：50px; margin：0 auto; position：reative;}。 SOLID; Border-Radius：7PX; -Moz-Border-Radius：7PX; -Webkit-Border-Radius：7PX; Overflow：Hidden; Position：Absolute; Z-Index：0;}。 1;フィルター：アルファ（不透明= 0）;  -  moz-opacity：0; ofacity：0;}。入力boxcontainer .bogusinput input {padding：0; width：16.3％; height：float：float：left; solid;}。inputboxContainer .bogusinput input：last-child {border：none;}。confirmbutton {width：240px; height：45px; border-radius：7px; -moz-border-radius：7px; -webkit-border-radius：7px; block; font-size：16px; margin：30px auto; margin-bottom：20px;}。showvalue {width：240px; height：22px; line-height：22px; font-size：16px; text-align：center; margin：0 auto;}

2。HTMLコード

<div> <div id = "inputboxContainer"> <入力タイプ= "テキスト"/> <div> <入力タイプ= "パスワード" maxlength = "6" disabled/> <input type = "password" maxlength = "6" disabled/> <入力タイプ= "パスワード" maxlength = "6" disabled/> <入力= "パスワード="パスワード= "パスワード" maxlength = "6" disabled/> <input type = "password" maxlength = "6" disabled/> <input type = "password" maxlength = "6" disabled/> <入力タイプ= "password" maxlength = "6" disabled/> <inputタイプ= "パスワード" maxLength = "6" 6 "6" disabled/> <input = "passwerd" 6 "6" 6 "6" 6 " maxlength = "6" disabled/> <input type = "password" maxlength = "6" disabled/> <input type = "password" maxlength = "6" disabled/</div> </div> <button = "confirmbutton"> view </button> <p id = "showvalue"> </p> </div> </p>

3。JSコード制御ロジック効果

（function（）{var container = document.getElementbyId（ "inputboxContainer"）; boxinput = {maxlength： ""、realinput： ""、bogusinput： ""、bogusinputarr： ""、callback： ""、init：function（fun）{var that = this = fun; container.children [0]; bogusinput = container.children [1]; that.bogusinput.children; that.realinput.onpropertychange = function（）{that.setValue（）;}}、setValue：function（）{this.realinput.value = this.realinput.value.replace（// d/g、 "）; console.log（this.realinput.value.value.leplace this.realinput.value; for（var i = 0; i <this.maxlength; i ++）{this.bogusinputarr [i] .value = real_str [i]？real_str [i]： "";} if（real_str.length> = this.maxlength）{thisealinput.value = real_str.substring（0,6）; this.callback（）;}}、getBoxInputValue：function（）{var realvalue = ""; for（this.bogusinputarr）{if（！this.bogusputarr [i] .value）{break;} realvalue += this.bogusinputarr [i] RealValue;}}}）（）boxinput.init（function（）{getValue（）;}）; document.getElementById（ "Confirmbutton"）。

上記は、編集者が導入したJSに基づくAlipay Payant Password入力ボックスです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！