This article implements an interface similar to Alipay payment password, which can only enter numbers and only 6 digits can be entered.
First, let me show you the renderings. If you feel good, please refer to the implementation code.
1. Style sheet
.wrap{margin: 10px auto;width: 329px;height: 640px;padding-top: 200px;}.inputBoxContainer{width: 240px;height: 50px;margin: 0 auto;position: relative;}.inputBoxContainer .bogusInput{width: 100%;height: 100%;border: #c3c3c3 1px solid;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;overflow: hidden;position: absolute;z-index: 0;}.inputBoxContainer .realInput{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.inputBoxContainer .bogusInput input{padding: 0;width: 16.3%;height: 100%;float:left;background: #ffffff;text-align: center;font-size: 20px;border: none;border-right: #C3C3C3 1px solid;}.inputBoxContainer .bogusInput input:last-child{border: none;}.confirmButton{width: 240px;height: 45px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;background: #f4f4f4;border: #d5d5d5 1px solid;display: 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 code
<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" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/</div></div><button id="confirmButton">View</button><p id="showValue"></p></div>
3. JS code control logic effect
(function(){var container = document.getElementById("inputBoxContainer");boxInput = {maxLength:"",realInput:"",bogusInput:"",bogusInputArr:"",callback:"",init:function(fun){var that = this;this.callback = fun;that.realInput = container.children[0];that.bogusInput = container.children[1];that.bogusInputArr = that.bogusInput.children; that.maxLength = that.bogusInputArr[0].getAttribute("maxlength"); that.realInput.oninput = function(){that.setValue();} that.realInput.onpropertychange = function(){that.setValue();}},setValue:function(){this.realInput.value = this.realInput.value.replace(//D/g,"");console.log(this.realInput.value.replace(//D/g,"")) var real_str = 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){this.realInput.value = real_str.substring(0,6);this.callback();}},getBoxInputValue:function(){var realValue = "";for(var i in this.bogusInputArr){if(!this.bogusInputArr[i].value){break;}realValue += this.bogusInputArr[i].value;}return realValue;}}})()boxInput.init(function(){getValue();});document.getElementById("confirmButton").onclick = function(){getValue();}function getValue(){document.getElementById("showValue").innerText = boxInput.getBoxInputValue();}The above is the Alipay payment password input box based on JS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!