首页>常用插件

JS网格输入框插件 V1.0.1

使用场景

功能强大的,最轻量级自动补全插件,仅有5KB

本插件主要用于:支付密码输入、验证码输入等。

插件引用

CSS依赖 : gridInput.css

JS依赖 : jquery.js 、gridInput.js

插件下载:gridInput1.0.1-min.rar

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 //网格宽度,用于计算整体宽度 });