古いルール〜デモに行くとき、あなたは最初に楽しむでしょう：6桁の文字パスワード入力デバイス
次に、ソースコードを追加します：6桁の文字パスワード入力
デモから、最初に入力できるのは6文字だけで、数字のみが入力できることがわかります。 6桁の入力が完了すると、コールバックが自動的に実行されます（入力結果はデモに表示されます）
1。最初に原則について話しましょう
まず、2つのことが必要です。1つは実際の入力ボックスです。つまり、実際に焦点が合っており、ユーザーからの入力入力を取得します。もう1つは一連の擬似入力ボックスです。つまり、実際には焦点を獲得していませんが、現在入力されている値のみを表示します（もちろん、パスワードは小さな黒いドット〜）。
第二に、私たちは単純であり、それを恐れることなく、実際の入力ボックスのすぐ下に（6）偽要素のセットがオーバーラップできるようにする必要があります。次のように：
実際にはマージンはありません〜、それをより明確に見るためだけです。
さらに、ユーザーに提示されたものがこの偽の入力ボックスのセットであるように、トップレベルの実際の入力ボックスOpCityを0に設定する必要があります。
ただし、ユーザーが再び入ると、彼はまだ実際の入力ボックスで動作します。その後、ユーザーの入力を偽造入力ボックスに入力します〜
非常にシンプル〜
2。コードコード
まず、個々のDOMが初期化され、入力イベントがバインドされます。
function init（fun）{var this = this; this.callback = fun; that.realinput = container.children [0]; that.bogusinput = container.children [1]; that.bogusinput.children; that.maxlength = that.bogusinputArr [0]; = function（）{that.setValue（）;} that.realinput.onpropertychange = function（）{that.setValue（）;}}}次に、ユーザー入力が入力されると、ユーザー入力がそれぞれ鍛造入力ボックスに入力されます
function setValue（）{this.realinput.value = this.realinput.value.replace（// d/g、 ""）; console.log（this.realinput.value.replace（// d/g、 ""））var real_str = this.realinput.value; i ++）{this.bogusinputarr [i] .value = real_str [i]？real_str [i]： "";} if（real_str.length> = this.maxlength）{this.realinput.value = real_str.substring（0,6）; this.callback（）;}}最後に、パスワードを取得する必要があります〜、最終的な値を取得する方法を取得しましょう〜
関数getBoxInputValue（）{var RealValue = ""; for（this.bogusinputArr）{if（！this.bogusinputArr [i] .value）{break;} realvalue += this.bogusinputArr [i] .value;} Return RealValue;}上記は、エディターが導入した6桁の文字パスワード入力関数のJS実装です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！