jQuery实现6位数字密码输入框
作者：webNick
字体：[ ] 类型：转载 时间：
本文主要对jQuery实现6位数字密码输入框的大概思路、实现代码进行详细介绍，具有一定的参考价值，需要的朋友一起来看下吧
下个月就要过年了，感觉有点瞎忙。翻了翻博客，感觉这个月都在打酱油啊。借口那么多，其实真的有点懒了，呵呵！
　　我争取在放假前，将自我总结以及来年计划发出来，把自己打造为勉族，不然真要浑噩度日了。
　　前几天，项目有个功能和某宝购物支付密码的输入框有点类似，就自己写了这篇博文，权当总结笔记吧。
　　啰嗦半天了，直接上代码：
&div&请在下方输入6位数字&/div&
&div class="ipt-box-nick"&
&input type="tel" maxlength="6" class="ipt-real-nick"/&
&div class="ipts-box-nick"&
&div class="ipt-fake-box"&
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&div class="ipt-active-nick"&&img src="/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"&&/div&
&通过结构层，分析下大概思路：
本功能就是一个真实输入框和6个假输入框的故事。
将真实输入框和假输入框容器都定位重叠，注意将真实输入框的优先级设置较高，不然就输入不了咯。
为了做成看似假输入框在输入，则将真实输入框隐藏，用opacity隐藏哦。
用户输入时，通过行为层js将真实输入框的值分配给每个假输入框。
输入的同时，控制假输入框光标的效果，我用了一张某宝的图片做成的，实际上，假输入框是没有获取到焦点的。
这里真实输入框的type类型用的是tel，而不是number。因为后者会生成小箭头呀，前者在用户点击输入框时app判断type是tel就会弹出数字输入键盘更好。
.ipt-box-nick {
height: 40px !
line-height: 40px !
position: relative ! }
.ipt-box-nick .ipt-real-nick {
position: absolute !
width: 100%;
height: 40px !
line-height: 40px !
opacity: 0 !
z-index: 3 ! }
.ipt-box-nick .ipts-box-nick {
position: absolute !
z-index: 1 !
width: 100%;
height: 40px !
line-height: 40px !
overflow: }
.ipt-box-nick .ipts-box-nick .ipt-fake-box {
height: 40px !
line-height: 40px !
display: flex !
justify-content: space-between ! }
.ipt-box-nick .ipts-box-nick .ipt-fake-box input {
width: 40px !
height: 40px !
border: 1px solid #D7D7D7 !
color: #810213 !
font-weight: bold !
font-size: 18px !
text-align: center !
padding: 0 ! }
.ipt-box-nick .ipt-active-nick {
width: 40px !
height: 40px !
line-height: 40px !
text-align:
position: absolute !
z-index: 2; }
.ipt-box-nick .ipt-active-nick img {
vertical-align: }
样式里面就一个定位重叠，一个隐藏真实输入框，我就不想多唠叨了。css我用sass写的，转译css有点乱，博友们将就看看吧。
$(".ipt-real-nick").on("input", function() {
//console.log($(this).val());
var $input = $(".ipt-fake-box input");
if(!$(this).val()){//无值光标顶置
$('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字
//console.log($(this).val());
var pwd = $(this).val().trim();
for (var i = 0, len = pwd. i & i++) {
$input.eq(i).val(pwd[i]);
if($input.eq(i).next().length){//模拟光标，先将图片容器定位，控制left值而已
$('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
$input.each(function() {//将有值的当前input后的所有input清空
var index = $(this).index();
if (index &= len) {
$(this).val("");
if (len == 6) {
//执行其他操作
console.log('输入完整，执行操作');
}else{//清除val中的非数字，返回纯number的value
var arr=$(this).val().match(/\d/g);
$(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
//console.log($(this).val());
因为tel类型，在pc端兼容问题，所以加了点正则。
本身没有什么复杂的东西，我就不多啰嗦了，需要注意的地方都加注释了。
附上完整代码：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&仿支付宝数字密码输入框&/title&
.ipt-box-nick {
height: 40px !
line-height: 40px !
position: relative ! }
.ipt-box-nick .ipt-real-nick {
position: absolute !
width: 100%;
height: 40px !
line-height: 40px !
opacity: 0 !
z-index: 3 ! }
.ipt-box-nick .ipts-box-nick {
position: absolute !
z-index: 1 !
width: 100%;
height: 40px !
line-height: 40px !
overflow: }
.ipt-box-nick .ipts-box-nick .ipt-fake-box {
height: 40px !
line-height: 40px !
display: flex !
justify-content: space-between ! }
.ipt-box-nick .ipts-box-nick .ipt-fake-box input {
width: 40px !
height: 38px !
border: 1px solid #D7D7D7 !
color: #810213 !
font-weight: bold !
font-size: 18px !
text-align: center !
padding: 0 !
border-radius:2}
.ipt-box-nick .ipt-active-nick {
width: 40px !
height: 40px !
line-height: 40px !
text-align:
position: absolute !
z-index: 2; }
.ipt-box-nick .ipt-active-nick img {
vertical-align: }
&div class="lh40-nick h40-nick fwb-nick"&请在下方输入6位数字&/div&
&div class="ipt-box-nick mb15-nick"&
&input type="tel" maxlength="6" class="ipt-real-nick"/&
&div class="ipts-box-nick"&
&div class="ipt-fake-box"&
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&div class="ipt-active-nick"&&img src="/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"&&/div&
&script src="///jquery/3.1.1/jquery.min.js"&&/script&
$(".ipt-real-nick").on("input", function() {
//console.log($(this).val());
var $input = $(".ipt-fake-box input");
if(!$(this).val()){//无值光标顶置
$('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字
//console.log($(this).val());
var pwd = $(this).val().trim();
for (var i = 0, len = pwd. i & i++) {
$input.eq(i).val(pwd[i]);
if($input.eq(i).next().length){//模拟光标，先将图片容器定位，控制left值而已
$('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
$input.each(function() {//将有值的当前input后的所有input清空
var index = $(this).index();
if (index &= len) {
$(this).val("");
if (len == 6) {
//执行其他操作
console.log('输入完整，执行操作');
}else{//清除val中的非数字，返回纯number的value
var arr=$(this).val().match(/\d/g);
$(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
//console.log($(this).val());
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具查看: 481|回复: 9
用按键精灵写了个脚本。
怎么从需要输入数字的时候循环一次会加1 比如60 循环到下一次的时候会变成61 62这样
这样哪里错了！求大神解决
楼下的那个可以实现，但不是完美的我给你优化了一下 do For 60 100 next KeyPress &Space&, 1 loop
按键精灵里面有个录制键盘事件的，你自己模拟不断按E键 ，再查看代码，给模拟的进行复制修改 、保存运行。
后台脚本： Hwnd = Plugin.Window.MousePoint() Rem a Call Plugin.Bkgnd.KeyPress(Hwnd, 57) Delay 60000 Goto a 先把鼠标移动到需要运行脚本的窗口上，再启动脚本 前台脚本： Rem a KeyPress &9&, 1 Delay 60000 Goto a
数字用数组保存。每次循环下标加1.比如 dim 数组(2) 数组(0)=685 数组(1)=765 数组(2)=800 for n=0 to 2 SayString 数组(n) next 如果数字太多，需要借助文件插件或者办公文档插件来自动获取数字。
简单埃 启动键 随便 设置一个，暂停键 设置 2. rem 随便a1 delay 10 2键 单击一次 delay 25 数字键 1 单击一次 delay 25 数字键 2 单击一次 delay 25 R键 单击一次 goto 随便a1 Rem a1 Delay 10 KeyPress 50,1 Delay 25 KeyPress 97,1 Delay 25
这个只是有3个语句 按下键盘5 延迟60秒 无限循环 打开按键精灵 新建 点源文件 把下面语句复制到里面 —————————————————————————————— While true KeyPress &5&, 1 Delay 60000 Wend 下面是每隔60秒向一个固定窗口 发送一个后台执行命令按下键盘5
a = 5000 For A =240 If DateDiff(&s&,t2,Now)
你表述不清楚，按A是指按住A，还是按键A，还有，60分钟这段时间是干嘛去了，是按键60分钟A，还是单纯延时60分钟，有人给代码你参考了，他是认为你单纯延时60分钟，看得出你写程序经验很少，你还是把逻辑表述清晰一点，程序逻辑，是不允许有半点
你看这样成吗？ Rem xh KeyPress &Num 1&, 1 KeyPress &Num 2&, 1 Delay 10 Goto xh //一秒=1000毫秒，要1000毫秒运行10次，平均分为10毫秒就行了 其实这也很简单，多看看教程和列程就懂了JavaScript仿支付宝6位数字密码输入框
作者：webNick
字体：[ ] 类型：转载 时间：
最近做了一个项目，涉及到某宝购物支付密码的输入框功能，下面小编把实现思路分享到脚本之家平台供大家参考
　　前几天，项目有个功能和某宝购物支付密码的输入框有点类似，就自己写了这篇博文，权当总结笔记吧。
　　啰嗦半天了，直接上代码：
&div&请在下方输入6位数字&/div&
&div class="ipt-box-nick"&
&input type="tel" maxlength="6" class="ipt-real-nick"/&
&div class="ipts-box-nick"&
&div class="ipt-fake-box"&
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&div class="ipt-active-nick"&&img src="/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"&&/div&
通过结构层，分析下大概思路：
本功能就是一个真实输入框和6个假输入框的故事。
将真实输入框和假输入框容器都定位重叠，注意将真实输入框的优先级设置较高，不然就输入不了咯。
为了做成看似假输入框在输入，则将真实输入框隐藏，用opacity隐藏哦。
用户输入时，通过行为层js将真实输入框的值分配给每个假输入框。
输入的同时，控制假输入框光标的效果，我用了一张某宝的图片做成的，实际上，假输入框是没有获取到焦点的。
　　这里真实输入框的type类型用的是tel，而不是number。因为后者会生成小箭头呀，前者在用户点击输入框时app判断type是tel就会弹出数字输入键盘更好。
.ipt-box-nick {
height: 40px !
line-height: 40px !
position: relative ! }
.ipt-box-nick .ipt-real-nick {
position: absolute !
width: 100%;
height: 40px !
line-height: 40px !
opacity: 0 !
z-index: 3 ! }
.ipt-box-nick .ipts-box-nick {
position: absolute !
z-index: 1 !
width: 100%;
height: 40px !
line-height: 40px !
overflow: }
.ipt-box-nick .ipts-box-nick .ipt-fake-box {
height: 40px !
line-height: 40px !
display: flex !
justify-content: space-between ! }
.ipt-box-nick .ipts-box-nick .ipt-fake-box input {
width: 40px !
height: 40px !
border: 1px solid #D7D7D7 !
color: #810213 !
font-weight: bold !
font-size: 18px !
text-align: center !
padding: 0 ! }
.ipt-box-nick .ipt-active-nick {
width: 40px !
height: 40px !
line-height: 40px !
text-align:
position: absolute !
z-index: 2; }
.ipt-box-nick .ipt-active-nick img {
vertical-align: }
　　样式里面就一个定位重叠，一个隐藏真实输入框，我就不想多唠叨了。css我用sass写的，转译css有点乱，博友们将就看看吧。
$(".ipt-real-nick").on("input", function() {
//console.log($(this).val());
var $input = $(".ipt-fake-box input");
if(!$(this).val()){//无值光标顶置
$('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字
//console.log($(this).val());
var pwd = $(this).val().trim();
for (var i = 0, len = pwd. i & i++) {
$input.eq(i).val(pwd[i]);
if($input.eq(i).next().length){//模拟光标，先将图片容器定位，控制left值而已
$('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
$input.each(function() {//将有值的当前input后的所有input清空
var index = $(this).index();
if (index &= len) {
$(this).val("");
if (len == 6) {
//执行其他操作
console.log('输入完整，执行操作');
}else{//清除val中的非数字，返回纯number的value
var arr=$(this).val().match(/\d/g);
$(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
//console.log($(this).val());
因为tel类型，在pc端兼容问题，所以加了点正则。
本身没有什么复杂的东西，我就不多啰嗦了，需要注意的地方都加注释了。
附上完整代码：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&仿支付宝数字密码输入框&/title&
.ipt-box-nick {
height: 40px !
line-height: 40px !
position: relative ! }
.ipt-box-nick .ipt-real-nick {
position: absolute !
width: 100%;
height: 40px !
line-height: 40px !
opacity: 0 !
z-index: 3 ! }
.ipt-box-nick .ipts-box-nick {
position: absolute !
z-index: 1 !
width: 100%;
height: 40px !
line-height: 40px !
overflow: }
.ipt-box-nick .ipts-box-nick .ipt-fake-box {
height: 40px !
line-height: 40px !
display: flex !
justify-content: space-between ! }
.ipt-box-nick .ipts-box-nick .ipt-fake-box input {
width: 40px !
height: 38px !
border: 1px solid #D7D7D7 !
color: #810213 !
font-weight: bold !
font-size: 18px !
text-align: center !
padding: 0 !
border-radius:2}
.ipt-box-nick .ipt-active-nick {
width: 40px !
height: 40px !
line-height: 40px !
text-align:
position: absolute !
z-index: 2; }
.ipt-box-nick .ipt-active-nick img {
vertical-align: }
&div class="lh40-nick h40-nick fwb-nick"&请在下方输入6位数字&/div&
&div class="ipt-box-nick mb15-nick"&
&input type="tel" maxlength="6" class="ipt-real-nick"/&
&div class="ipts-box-nick"&
&div class="ipt-fake-box"&
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&input type="text" &
&div class="ipt-active-nick"&&img src="/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"&&/div&
&script src="///jquery/3.1.1/jquery.min.js"&&/script&
$(".ipt-real-nick").on("input", function() {
//console.log($(this).val());
var $input = $(".ipt-fake-box input");
if(!$(this).val()){//无值光标顶置
$('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字
//console.log($(this).val());
var pwd = $(this).val().trim();
for (var i = 0, len = pwd. i & i++) {
$input.eq(i).val(pwd[i]);
if($input.eq(i).next().length){//模拟光标，先将图片容器定位，控制left值而已
$('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
$input.each(function() {//将有值的当前input后的所有input清空
var index = $(this).index();
if (index &= len) {
$(this).val("");
if (len == 6) {
//执行其他操作
console.log('输入完整，执行操作');
}else{//清除val中的非数字，返回纯number的value
var arr=$(this).val().match(/\d/g);
$(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
//console.log($(this).val());
效果演示：
以上所述是小编给大家介绍的JavaScript仿支付宝6位数字密码输入框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具