Реализуйте поле ввода пароля платежа, аналогичное Alipay на основе JS

Эта статья реализует интерфейс, похожий на пароль платежа Alipay, который может вводить только номера, и может быть введено только 6 цифр.

Во -первых, позвольте мне показать вам визуализации. Если вы чувствуете себя хорошо, пожалуйста, обратитесь к коду реализации.

1. Стильский лист

 .Wrap {Margin: 10px auto; ширина: 329px; высота: 640px; warding-top: 200px;}. inputboxcontainer {ширина: 240px; высота: 50px; маржа: 0 Auto; позиция: vitivality;}. inputboxcontainer .bogusinput {width: 100%; #100%; твердый; граница-радий: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; переполнение: скрыто; положение: абсолют; z-index: 0;}. inputboxcontainer. Realinput {width: 100%; Высота: 100%; 1; Фильтр: альфа (непрозрачность = 0);-Moz-opbounty: 0; непрозрачность: 0;}. Inputboxcontainer. BogusInput Вход {Padding: 0; ширина: 16,3%; высота: 100%; float: левый; фон: #ffff; SOLID;}. InputboxContainer .bogusInput Ввод: Последний ребенок {Граница: Нет;}. Подтверждение Button {ширина: 240px; высота: 45px; граница-радиус: 7px; -moz-border-radius: 7px; -webkit-bord-radius: 7px; #fonal: #f4f4f4f4f4; #d5d5; Block; Font-Size: 16px; Margin: 30px Auto; Margin-Bottom: 20px;}. ShowValue {ширина: 240px; высота: 22px; линия-высота: 22px; размер шрифта: 16px; текст-альор: Центр; Маржа: 0 Auto;}

2. HTML -код

 <div><div id="inputBoxContainer"><input type="text"/><div><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength = "6" Отключить/> <input type = "password" maxlength = "6" Отключено/> <input type = "password" maxlength = "6" Отключено/</div> </div> <button Id = "Подтверждение, что" Просмотр </button> <p id = "showValue"> </p> </div>

3. JS Code Control Effect

 (function () {var container = document.getElementById ("inputBoxContainer"); BoxInput = {maxLength: "", RealInput: "", BogusInput: "", BogusinputArr: "", Callback: "", init: function (fun) {var = this; this.callback = fun Container.children [1]; function () {that.setValue ();}}, setValue: function () {this.RealInput.Value = this.RealInput.value.replace (// d/g, ""); console.log (this.RealInput.value.Replace (// d/g, ") var var_strue. <this.maxlength; real_str.substring (0,6); this.callback ();}}, getboxinputValue: function () {var Realvalue = ""; for (var i в этом. BogusinputArr) {if (! this.bogusinputarr [i] .value) {break; RealValue;}}}) () boxInput.Init (function () {getValue ();}); document.getElementById ("sefintButton"). OnClick = function () {getValue ();} function getValue () {decoctElementByid ("showValue").

Выше приведено поле ввода пароля Alipay платеж на основе JS, введенного редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!