最近接的新项目,登录注册页根据需求要使用手机号获取验证码登录或者注册,一开始的想法是要做6个inputshur输入框,但是光标问题太严重。在网上看别人的实现方法,发现可以用一个input+6个span或者6个div来做,经过构思,实现了以下的方法。
html:
<div class="pc_in">
<div>
<span class="g_hx"></span>
<span class="g_hx"></span>
<span class="g_hx"></span>
<span class="g_hx"></span>
<span class="g_hx"></span>
<span class="g_hx"></span>
</div>
<p>
<input type="text" v-model="paymentCodeValue" maxlength="6" />
</p>
</div>
less:
.pc_in {
position: relative;
float: left;
width: 6.7rem;
height: 1.12rem;
margin-top: 0.92rem;
margin-left: 0.4rem;
div {
display: flex;
width: 100%;
height: 1.12rem;
span {
flex: 1;
height: 200%;
border: #E6E8ED solid 1px;
border-right: none;
margin-top: -0.56rem;
}
span:last-child {
border-right: #E6E8ED solid 1px;
}
}
p {
position: absolute;
width: 7.5rem;
height: 1.12rem;
line-height: 1.12rem;
top: 0;
left: 0;
background: none;
overflow: hidden;
input {
float: left;
width: 120%;
height: 0.8rem;
line-height: 0.8rem;
margin-top: 0.2rem;
@include sc(0.4rem, #000000);
letter-spacing: 0.9rem;
background: none;
text-indent: 0.4rem;
}
}
}
首先在一个div中写出6个格子 再用一个input定位定在这6个格子上面 并关掉默认的背景(用letter-spacing: 0.9rem; 字体间距来实现)
用一个input输入的时候 输入了6个数字 只要能让它能输入第7个数字 就不会出现格式错误的情况
注意点:
1、用来包裹input标签的父标签要做长一点(我用p标签包裹它一定要比自己的父标签要长一点 就是比6个格子要长一点 因为当输入到第6个数字时 如果input的父标签的长度不够时 input里面的数字会自动往左挤 出现格式错乱)
2、input的父标签不要用overflow: hidden; 用一个input就是要让input的数字溢出一点 就是说你输了6个数字可以看到第7个数字的光标(如果溢出隐藏看不到第7个数字的光标则input里面的数字会自动往左挤)
3、我们做的时候 刚输完第6个数字 就去做业务处理 或者让input失去焦点根本就不会出现在页面看到光标的情况
在传统的 Web 开发过程中,处理图形验证码很简单,只需要在后台用随机字符串生成一个图片,将验证码内容放进 Session 即可,用户提交表单时从 Session[1] 取出判断即可。
用于一些注册类的场景,点击发送验证码,xx秒后重新发送。利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击。
在这里讲一讲这个案例的实现思路吧(个人见解)。。核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数。这个函数会根据当前的 cookie 值判断 是否处于倒计时阶段
细心的同学可以发现,现在很多网站当登录多次之后就会出现一个图形验证码,或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。那么图形验证码是为了解决什么问题而出现的呢?
网站中为了防止恶意获取验证短信、验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果。比如:做注册页面时会有获取验证码按钮,点击后过60秒才能重新获取,数字是递减的到0时重新回到最初的状态。实现这个功能只需要一个setInterval和一个clearInterval就能搞定了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!