基于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 相关文章推荐
拥抱模块化的JavaScript
Mar 07 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
vue的toast弹窗组件实例详解
May 14 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
浅谈PDF.js使用心得
2018/06/07 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
flask框架视图函数用法示例
2018/07/19 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
上海期货面试题
2014/01/31 面试题
各营销点岗位职责范本
2014/03/05 职场文书
文明村创建实施方案
2014/03/27 职场文书
教学改革实施方案
2014/03/31 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
部队2014年终工作总结
2014/11/27 职场文书
民政局未婚证明
2015/06/15 职场文书
中学语文教学反思
2016/02/16 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
Python Pandas 删除列操作
2022/03/16 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
MySQL普通表如何转换成分区表
2022/05/30 MySQL