この記事では、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のウェブサイトへのご支援ありがとうございます!