模拟支付宝密码输入功能,ios上光标隐藏(网上找的在ios上光标还是会显示,进行了改进)
<div class="pwd-box"> <input type="tel" maxlength="6" class="pwd-input" id="pwd-input"> <div class="fake-box"> <input type="number" readonly=""> <input type="number" readonly=""> <input type="number" readonly=""> <input type="number" readonly=""> <input type="number" readonly=""> <input type="number" readonly=""> </div> </div>
css样式
.pwd-box{ width:100%; padding-left: 1px; position: relative; border: 1px solid #9f9fa0; border-radius: 3px; over-flow:hidden } .pwd-box input[type="tel"]{ width: 135%;/*让主要的输入框input宽度宽于显示密码的div*/ height: 55px; color: transparent; position: absolute; top: 0; left: 0; border: none; font-size: 18px; opacity: 0; z-index: 1; letter-spacing: 35px; text-indent: -999em; /*文本向左缩进,不让光标出现在视野内*/ opacity: 0; margin-left: -100px;/*让input向左移动100px,只要移出屏幕外就行,让光标不出现*/ } .fake-box input{ width: 15.3%; height: 48px; border: none; border-right: 1px solid #e5e5e5; text-align: center; font-size: 30px; display: inline-block; padding: 0; margin: 0; background: #fff; } .fake-box input:nth-last-child(1){ border:none; }
js代码
<script type="text/javascript"> function myFunction(){ console.log('此功能点击时让光标至内容的最后,好让删除时 从最后一位数字删除') var t=$("#pwd-input").val(); $("#pwd-input").val("").focus().val(t); } </script> <script type="text/javascript"> var $input = $(".fake-box input"); $("#pwd-input").on("input", function() { var pwd = $(this).val().trim(); var reg=new RegExp(/^[0-9]*$/); if(!(reg.test(pwd))){ return false; } console.log('pwd',pwd) for (var i = 0, len = pwd.length; i < len; i++) { $input.eq("" + i + "").val(pwd[i]); } $input.each(function() { var index = $(this).index(); if (index >= len) { $(this).val(""); } }); if (len == 6) { } }); </script>