基于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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
JS实现轮播图效果
Jan 11 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue实现图书管理系统
Dec 29 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
真正好用的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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
学习python处理python编码问题
2011/03/13 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python字典的常用操作方法小结
2016/05/16 Python
Python中的默认参数实例分析
2018/01/29 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
基于python实现操作git过程代码解析
2020/07/27 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
阳光体育活动总结
2014/04/30 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
个人求职意向书
2015/05/11 职场文书