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 短路法代码精简
Aug 20 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
javascript操作ul中li的方法
May 14 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
JavaScript流程控制(循环)
Dec 06 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
codeigniter数据库操作函数汇总
2014/06/12 PHP
php实现读取超大文件的方法
2014/07/28 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
python目录与文件名操作例子
2016/08/28 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
自荐书格式
2013/12/01 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
公安学专业求职信
2014/07/27 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
个人投资合作协议书
2014/10/12 职场文书
php字符串倒叙
2021/04/01 PHP
Python实现数据的序列化操作详解
2022/07/07 Python