最新消息:文章中包含代码时,请遵守代码高亮规范!

移动端自制作输入键盘,实现验证码签到【原创】

原创文章 Ann 715浏览 0评论

最近做的一个兼职类的项目,要实现6位数字验证码签到功能,效果图如下

20002验证码签到

看似很简单的页面,刚开始编写的代码的时候,我也是抱着轻松地态度,心里想着这并没有什么难处,用js实现了输入数字的效果。

但是后来就发生了尴尬的事情,测评中心那边测试的时候,手机切换到数字键盘,但第一次点击数字键盘的时候,输入键盘就自动切换到英文键盘,如果想要输入数字,就必须要重新切换到数字键盘,大大降低了用户的体验效果,并且,输入的数字,当点击退格键的时候,数字并不能减退,没办法,测评中心那边提出了这个比较严重的bug,并要求我修改,苦恼了半天不知道到底该怎么修改。

后来,同事告诉我无线中心部门开发这个项目的APP的时候,对于这个页面,他们采用了自己制作了数字输入键盘,实现验证签到的效果,自己制作键盘,哇塞!厉害,我可是做不出来,但有其他的方式解决这个问题吗?于是乎······我继续苦恼起来!

没办法,最后,我还是不得不效仿APP的开发,去寻找自己制作输入键盘的路子·····

通过查阅大量的资料和咨询老司机,总算!黄天不负苦心人,哈哈,我终于做出来了,好啦!话不多说,好东西当然要和大家一起分享,现在我就贴出我的大作!

1.编写静态页代码

<div class="wrap">
 <!--head-->
 <div class="head-out">
 <div class="header AppealHeader">验证码签到
 <a onclick="javascript:history.back(-1);" class="back appeal-back">
 </a>
 </div>
 </div>
 <!--main-->
 <div class="main-out">
 <p class="identifying-title">输入企业提供的验证码,即可完成签到</p>
 <div class="pass-box">
 <!--验证码内容块-->
 <div class="pass-line">
 <ul class="code-line-ul">
 <li class="code-line-list"><span class="line"></span></li>
 <li class="code-line-list"><span class="line"></span></li>
 <li class="code-line-list"><span class="line"></span></li>
 <li class="code-line-list"><span class="line"></span></li>
 <li class="code-line-list"><span class="line"></span></li>
 <li class="code-line-list"><span class="line"></span></li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!--弹出编辑框-->
 <div class="enter-box">
 <ul class="enter-ul">
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">1</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">2</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">3</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">4</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">5</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">6</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">7</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">8</a></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">9</a></li>
 <li class="enter-list"><span class="enter-list-gray"></span></li>
 <li class="enter-list"><a href="javascript:void(0);" class="enter-list-active">0</a></li>
 <li class="enter-list"><span class="enter-list-gray del"><img src="images/home/enter_exit.png" class="del-img"></span></li>
 </ul>
 </div>

2.编写css样式


&lt;style&gt;
.code-line-ul .code-line-list{
height: 40px;
float: left;
width: 16.3%;
font-size: 30px;
text-align: center;
line-height: 40px;
}
.enter-box{
width: 100%;
max-width: 720px;
position: fixed;
bottom: 0;
background: #fff;
}
.enter-list{
width: 33.33%;
height: 48px;
float: left;
line-height: 48px;
text-align: center;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
}
.enter-list:nth-child(3n){
border-right:none;
}
.enter-list:nth-child(10){
border-bottom:none;
background: #d1d5da;
}
.enter-list:nth-child(11){
border-bottom:none;
}
.enter-list:nth-child(12){
border-bottom:none;
background: #d1d5da;
}
.enter-list-active{
display: block;
width: 100%;
height: 100%;
font-size: 25px;
color: #000;
}
.enter-list-active:active{
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
.enter-ul .enter-list-gray{
display: block;
color: #e0e0e0;
background: #d1d5da;
height: 50px;
line-height: 50px;
overflow: hidden;
}
.del .del-img{
width: 23px;
height: 17px;
margin-top: 16px;
}
&lt;/style&gt;

3.js代码编写实现验证码签到功能

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 <script type="text/javascript">
 $(function(){
 var i = 0;
 $(".enter-ul li a").click(function(){
 var Num = $(this).html();
 i++
 if(i<6){
 $(".code-line-list").eq(i-1).html(Num);
 }else{
 $(".code-line-list").eq(i-1).html(Num); 
 setTimeout(function(){
 location.href="#"; 
 },500);
 } 
 });
 // 删除键按钮
 $(".del").click(function(){
 
 if(i>0){
 i--
 $(".code-line-list").eq(i).html('<span class="line"></span>');
 i==0;
 }
 });
 });
 </script>

最后实现的效果是这样的

截屏_2017-02-07-14-42-59

怎么样,是不是很神奇呢!!

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/19665.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者ann的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!