基于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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
Jqprint实现页面打印
Jan 06 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 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与SQL注入攻击[二]
2007/04/17 PHP
php的字符串用法小结
2010/06/08 PHP
PHP常用数组函数介绍
2014/07/28 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP类的反射用法实例
2014/11/03 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Document 对象的常用方法
2009/07/31 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python中dict()的高级用法实现
2019/11/13 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
艺术爱好者的自我评价分享
2013/10/08 职场文书
党员创先争优承诺书
2014/03/26 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
戒赌保证书
2015/05/11 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android