插件:密码输入框
这是插件系列的第一个文章,平时工作中忙里偷闲写了些自己的组件,现在分享一下
我的组件简洁无依赖(不需要再引用别的库比如JQ)用原生JS写
组件样式简单,没打算写多漂亮重点实现功能
====== 分割线 ============
模仿支付宝密码输入框仅仅是功能模仿,样式没全部模仿; PC、移动端都能用
调用代码:
new passwordInput().show({ inputNumber: 6, // 密码有多少位 callback: function (data) { console.log('密码:' + data) setTimeout(function() { // 假装是ajax var ajax = true if (ajax) { new passwordInput().hide() } }, 3000); } })
插件源码:
(function () { function passwordInput() { if (!document.getElementById('passwordInputStyle')) { //添加样式 var style = document.createElement('style'); style.type = 'text/css'; style.id = 'passwordInputStyle' style.innerHTML=` #passwordInput{ width: 100%; height: 100%; opacity: 0; position: fixed; top: 0; left: 0; z-index: 99; background: rgba(0, 0, 0, 0.6); box-sizing:border-box; transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; display: flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; display: -o-flex; flex-direction: row; -ms-flex-direction: row; -moz-flex-direction: row; -webkit-flex-direction: row; -o-flex-direction: row; justify-content: center; -ms-justify-content: center; -moz-justify-content: center; -webkit-justify-content: center; -o-justify-content: center; align-items: center; -ms-align-items: center; -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; } .passwordInput__none{ display: none !important; } .passwordInputShow{ opacity: 1 !important; } #passwordInput_container{ padding: 10px; border-radius: 5px; background: white; } .passwordInput_input{ width: 30px; height: 30px; margin: 0 2.5px; font-size: 35px; font-weight: bold; text-align: center; border: 1px solid black; } .passwordInput_inputVal{ border: 1px solid rgb(0, 152, 255); } #passwordInput_val{ position: absolute; opacity: 0; } `; document.getElementsByTagName('head').item(0).appendChild(style); } } passwordInput.prototype.show = function(option) { // 显示弹窗 var _this = this; option = option ? option : {} option.inputNumber = option.inputNumber ? option.inputNumber : 4 option.callback = option.callback ? option.callback : function () {}; // 渲染输入框数量 var inputHTML = '' for (var i = 0, iLen = option.inputNumber; i < iLen; i++) { inputHTML += `<input id="passwordInput_input${i}" class="passwordInput_input" type="password" readonly="readonly">` } var body = document.getElementsByTagName("body")[0]; body.insertAdjacentHTML("beforeEnd", ` <div id="passwordInput" class="passwordInput__none"> <input id="passwordInput_val" maxlength="${option.inputNumber}" type="text" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"> <div id="passwordInput_container"> ${inputHTML} </div> </div> `); var passwordInput = document.getElementById('passwordInput') passwordInput.classList.remove("passwordInput__none"); setTimeout(function() { passwordInput.classList.add("passwordInputShow"); document.getElementById('passwordInput_val').focus(); }, 100); document.getElementById('passwordInput_val').oninput = function(event){ //侦听输入框 setTimeout(function() { var val = event.target.value; var input = document.getElementsByClassName('passwordInput_input') for (var i = 0, iLen = input.length; i < iLen; i++) { var element = input[i] element.classList.remove("passwordInput_inputVal") element.value = '' } for (var i = 0, iLen = val.length; i < iLen; i++) { var element = input[i] element.classList.add("passwordInput_inputVal") element.value = '*' } if (val.length == option.inputNumber) { option.callback(val) } }, 100); } document.getElementById('passwordInput_container').onclick=function () { // 获取焦点 document.getElementById('passwordInput_val').focus(); } document.getElementById('passwordInput').addEventListener('click', function (e) { // 点击遮罩层隐藏弹窗 if(e.target == this){ _this.hide() } }, false); } passwordInput.prototype.hide = function() { // 隐藏弹窗 var body = document.getElementsByTagName("body")[0]; var passwordInput = document.getElementById('passwordInput') passwordInput.classList.remove("passwordInputShow"); setTimeout(function() { try { body.removeChild(passwordInput); } catch (e) { } }, 600); } window.passwordInput = passwordInput })()
完整的调用例子截个图: