基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)


Posted in Javascript onOctober 27, 2016

最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的移动研发,从他那里得到启发,最终实现了这个效果,先把效果图展示出来给大家看看

效果图:

基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

输入验证码

基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

粘贴图片输入完毕

基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

下面就把实现过程奉献给大家

第一步:编写HTML代码

<div class="main-out">
<p class="identifying-title">输入企业提供的验证码,即可完成签到</p>
<!--黑色横线框-->
<div class="pass-box">
<div class="pass-line">
<div class="line-box"><span class="line line-one"></span></div>
<div class="line-box"><span class="line line-two"></span></div>
<div class="line-box"><span class="line line-three"></span></div>
<div class="line-box"><span class="line line-four"></span></div>
<div class="line-box"><span class="line line-five"></span></div>
<div class="line-box"><span class="line line-six"></span></div>
</div>
<!--输入验证码框给一个绝对定位-->
<div class="passInput" id="on">
<input type="text" class="inputCont inputCont-one" maxlength="1" />
<input type="text" class="inputCont inputCont-two" maxlength="1"/>
<input type="text" class="inputCont inputCont-three" maxlength="1"/>
<input type="text" class="inputCont inputCont-four" maxlength="1"/>
<input type="text" class="inputCont inputCont-five" maxlength="1"/>
<input type="text" class="inputCont inputCont-six" maxlength="1"/>
</div>
</div>
</div>

第二步:给代码添加样式

.identifying-title{
width: 100%;
margin-top: 100px;
font-size: 14px;
color:#333;
text-align: center;
}
.pass-box{
position: relative;
width: 240px;
height: 40px;
margin: 50px auto 0;
}
.pass-line{
margin:0 auto;
width:100%;
height:100%;
}
.line-box{
float: left;
width: 40px;
height: 40px;
}
.line{
display: block;
width: 25px;
height:3px;
margin:18px auto 0;
background: #000;
}
.passInput{
position: absolute;
width:240px;
height:40px;
left: 0;
top: 0;
}
.inputCont{
float: left;
width: 25px;
height:40px;
margin:0 7.5px;
z-index: 2;
font-size:30px;
color:#333;
line-height: 40px;
text-align: center;
background: none;
}

第三步:编写js代码

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(function(){
//控制输入框只能输入一位并且是数字
$(".inputCont-one").focus();
$(".line-one").hide()
onload = function(){
var txts = on.getElementsByTagName("input");
for(var i = 0; i<txts.length;i++){
var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.onkeyup=function(){
if(this.value=this.value.replace(/\D/g,'')) {
var next = this.index + 1;
if(next > txts.length - 1) return;
txts[next].removeAttribute("readonly");
txts[next].focus();
}else{
$(this).focus();
}
}
}
txts[0].removeAttribute("readonly");
}
// 输入框获得焦点的时候后面的横线消失
$(".inputCont-one").focus(function(){
$(".line-one").hide()
})
$(".inputCont-two").focus(function(){
$(".line-two").hide()
})
$(".inputCont-three").focus(function(){
$(".line-three").hide()
})
$(".inputCont-four").focus(function(){
$(".line-four").hide()
})
$(".inputCont-six").focus(function(){
$(".line-six").hide()
})
$(".inputCont-five").focus(function(){
$(".line-five").hide()
})
})
</script>

以上所述是小编给大家介绍的基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Angular4 ElementRef的应用
Feb 26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
JavaScript两种计时器的实例讲解
Jan 31 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 #Javascript
vue的props实现子组件随父组件一起变化
Oct 27 #Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
简单理解vue中Props属性
Oct 27 #Javascript
利用React-router+Webpack快速构建react程序
Oct 27 #Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 #Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 #Javascript
You might like
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JS实现长图上下滚动效果
2020/03/19 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python super的使用方法及实例详解
2019/09/25 Python
Python是什么 Python的用处
2020/05/26 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
领导党性分析材料
2014/02/15 职场文书
医德医风演讲稿
2014/05/20 职场文书
英语教师自荐信
2014/05/26 职场文书
600字作文之感受大自然
2019/11/27 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers