JavaScript实现横线提示输入验证码随输入验证码输入消失的方法


Posted in Javascript onSeptember 24, 2016

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

效果图:

JavaScript实现横线提示输入验证码随输入验证码输入消失的方法 

输入验证码

JavaScript实现横线提示输入验证码随输入验证码输入消失的方法 

输入完毕

JavaScript实现横线提示输入验证码随输入验证码输入消失的方法 

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

第一步:编写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>

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

Javascript 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
JQuery学习总结【二】
Dec 01 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
javascript 分号总结及详细介绍
Sep 24 #Javascript
Bootstrap对话框使用实例讲解
Sep 24 #Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 #Javascript
angular.js之路由的选择方法
Sep 24 #Javascript
用js写的一个路由(简单实例)
Sep 24 #Javascript
简单的js表格操作
Sep 24 #Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 #Javascript
You might like
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
详解json在php中的应用
2018/09/30 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python conda操作方法
2019/09/11 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python FTP编程基础入门
2021/02/27 Python
英语专业个人求职自荐信
2013/09/21 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
2014年团委工作总结
2014/11/13 职场文书
民事诉讼代理词
2015/05/25 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python