基于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 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
js模糊查询实例分享
Dec 26 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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下escape解码函数的实现方法
2010/08/08 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
php的socket编程详解
2016/11/20 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
如何在selenium中使用js实现定位
2020/08/18 Javascript
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python使用folium excel绘制point
2019/01/03 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
精彩的英文自荐信
2014/01/30 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸