Старые правила ~ Когда вы переходите к демонстрации, сначала вам повеселитесь: шестизначное устройство ввода пароля символа
Затем добавьте исходный код: шестизначный пароль символов Inputter
Из демонстрации я вижу, что во -первых, можно ввести только шесть символов, и можно ввести только числа. После завершения ввода шестизначных цифр будет автоматически выполнен обратный вызов (результат ввода отображается в демонстрации)
1. Сначала поговорим о принципе
Прежде всего, нам нужны две вещи: одна - реальная входная коробка, то есть он действительно находится в фокусе и получает ввод ввода от пользователя; Другой - это набор полевых ящиков псевдо, то есть он на самом деле не получает фокусировку, но он отображает только введенное в настоящее время значение (конечно, пароль - это лишь маленькая черная точка ~).
Во -вторых, мы должны быть простыми и не бояться этого, позволяя набору (6) поддельных элементов перекрываться чуть ниже реального ввода. следующее:
На самом деле нет маржи ~, просто чтобы увидеть это более четко.
Кроме того, нам необходимо установить Opcity Opcity на вершине на верхнем уровне на 0, чтобы тот, который представлен пользователю, является этим набором фальшивых вводов.
Однако, когда пользователь снова входит, он все еще работает на реальном поле ввода. После этого мы заполним ввод пользователя в полевой поля ввода в свою очередь ~
Очень просто ~
2. Код кода
Во -первых, отдельный DOM инициализируется, и входное событие связано.
Функция init (FUN) {var that = this; this.callback = FUN; that.RealInput = container.Children [0]; that.bogusinput = container.children [1]; that.bogusinputArr = tho.bogusinput.children; что. = 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; для (var i = 0; i <this.maxl; 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 (var i in this.bogusInputArr) {if (! this.bogusinputarr [i].Выше приведено реализация JS шестизначной функции ввода пароля символа, введенной редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!