基于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去掉字符串里的所有空格
Feb 08 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
javascript实现动态标签云
Oct 16 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 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简单图像创建入门实例
2015/06/10 PHP
PHP类型约束用法示例
2016/09/28 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python的历史与优缺点整理
2020/05/26 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
职业女性的职业规划
2014/03/04 职场文书
家长会演讲稿
2014/04/26 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
债务纠纷起诉书
2015/05/20 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技