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学习笔记8 用JSON做原型
Jan 11 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
redux.js详解及基本使用
May 24 Javascript
jQuery实现高级检索功能
May 28 jQuery
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python-地图可视化组件folium的操作
2020/12/14 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
机修工岗位职责
2013/11/24 职场文书
区域销售经理职责
2013/12/22 职场文书
顶撞领导检讨书
2014/01/29 职场文书
给老师的检讨书
2014/02/11 职场文书
法制宣传月活动方案
2014/05/11 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
对公司的意见和建议
2015/06/04 职场文书
企业文化学习心得体会
2016/01/21 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL