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 相关文章推荐
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
js密码强度检测
Jan 07 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
学校消防演习方案
2014/02/19 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏