JS网格输入框插件 V1.0.1★分享
使用场景
功能强大的,最轻量级自动补全插件,仅有5KB
本插件主要用于:支付密码输入、验证码输入等。
插件引用
CSS依赖 : gridInput.css
JS依赖 : jquery.js 、gridInput.js
Demo
- 支付密码:
-
HTML 结构
<!-- 模拟输入 -->
<p class="pay_password_grid">
<!-- 此输入框需隐藏,仅用于取值 -->
<input id="pay_password" type="password" maxlength="6">
/* type="password":为模拟密码输入模式,type="text":为可见模式。 */
/* maxlength="6":配置输入的格子数量。 */
</p>
CSS代码
.pay_password_grid{ float: left; border:#ccc solid 1px; background-color: #fff; width: 168px; height: 28px; position: relative;}
.pay_password_grid span{ float: left; margin-left: -1px; width: 28px; height: 28px; color: #666; border-left:#ccc solid 1px; position: relative; text-align: center; line-height: 26px; }
.pay_password_grid span b{ display: none; height: 28px; background-color: #fff; font-size: 14px; }
.pay_password_grid span i{ display: block; width: 0px; height: 18px; border-left:#333 solid 1px; position: absolute; left: 50%; top: 5px; }
.pay_password_grid span i{ z-index: -1; -webkit-animation:guangbiao 1s linear 0s normal none infinite; animation:guangbiao 1s linear 0s normal none infinite; }
@-webkit-keyframes guangbiao{0%,20%,80%,100%{ opacity: 0; }30%,70% { opacity: 1; }}
@keyframes guangbiao{0%,20%,80%,100%{ opacity: 0; }30%,70% { opacity: 1; }}
.pay_password_grid span.active{ box-shadow: 0 0 10px #52a8ec; border:#7bbcef solid 1px; z-index: 2; width: 26px; margin-top: -1px; border-radius: 2px; padding-left: 1px;}
#pay_password{ display: none; }
.pay_pass_error{ border-color: #f88; }
.pay_pass_error span{ border-color: #f88; }
JS 调用方法
new gridInput({
'el': '.pay_password_grid', //模块名
'errorClass' : 'pay_pass_error', //错误提示className
'gridW': 28 //网格宽度,用于计算整体宽度
});