vue,一路走来(14)--短信验证码框的实现(类似支付密码框)
由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现。
思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实input标签),提高层级定位在上方,最大长度为6,然后将上方真实input标签的值传给每一个单独的假input标签。
<div class="phonenum-show">
<div class="getback-title">收回剩余礼金
<span @click="getbackMoneyclock()"><img src="../assets/getback.png" alt=""></span>
</div>
<div class="write-phonenum">
<p>请输入尾号<span></span>的手机收到的短信验证码</p>
<input type="tel" maxlength="6" class="realInput" v-model="realInput" @keyup="getNum()" @keydown="delNum()" id="focusid">
<ul class="write-input clearfix">
<li v-for="disInput in disInputs"><input type="tel" maxlength="1" v-model="disInput.value"></li>
</ul>
<mt-button size="large">我明白了 确认提交</mt-button>
<p>剩余礼金将收回至微信“零钱包”请注意查收。</p>
<p style="color:#bfc0c0;">活动结束24小时后可申请收回剩余的礼金。</p>
</div>
</div>
.phonenum-show{padding:10px;background: #fff;}
.getback-title{padding-bottom:10px;border-bottom: 1px solid #dddddd;position: relative;font-size: 14px;margin-bottom: 10px;}
.getback-title span{position: absolute;right:;top:3px;width:15px;height:15px;display: inline-block;}
.write-phonenum p{text-align: center;font-size: 12px;}
.write-phonenum p span{color: #3b90d1;}
.write-input {border:1px solid #;width:186px;margin:10px auto;}
.write-input li{float: left;width:30px;height: 30px;border-right:1px solid #ddd;}
.write-input li input{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;resize: none;outline: none;border:;width:30px;line-height: 30px;text-align: center;height: 30px;font-size:16px;}
.write-input li:last-child{border-right: none;}
.write-phonenum .mint-button--default{background: #3b90d1;color:#fff;font-family: "微软雅黑";font-size: 14px;width:%;margin:10px auto;}
.realInput{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;resize: none;outline: none;border:;z-index: ;position: absolute;width:186px;height: 32px;line-height: 32px;background: none;display: block;left:%;margin-left: -93px;top:76px;opacity: 0;font-size:0px;caret-color:#fff;color:#000;text-indent: -5em;}
/*影藏input标签*/
input[type="tel" i]:disabled{background-color: #fff;}
export default {
name: 'packetMessage',
data(){
return{
messagepacket:false,
packets:[ ],
disInputs:[{value:''},{value:''},{value:''},{value:''},{value:''},{value:''}],
realInput:'' }
},
methods:{
getbackMoney(){
this.messagepacket=true;
var idObj = document.getElementById('focusid');
idObj.focus();
//点击进来自动获取焦点
},
getbackMoneyclock(){
this.messagepacket=false
},
getNum(){
for(var i=0;i<this.realInput.length;i++){
this.disInputs[i].value=this.realInput.charAt(i)
// 表示字符串中某个位置的数字,即字符在字符串中的下标。
}
},
delNum(){
var oEvent = window.event;
if (oEvent.keyCode == 8) {
if(this.realInput.length>0){
this.disInputs[this.realInput.length-1].value=''
}
}
}
},
components: {}
}
vue,一路走来(14)--短信验证码框的实现(类似支付密码框)的更多相关文章
- SpringSceurity(5)---短信验证码登陆功能
SpringSceurity(5)---短信验证码登陆功能 有关SpringSceurity系列之前有写文章 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSecur ...
- 23、vue实现获取短信验证码
1.html页面: <el-form-item prop="phoneCode" class="pr"> <el-input placehol ...
- atitit.短信 验证码 破解 v3 p34 识别 绕过 系统方案规划----业务相关方案 手机验证码 .doc
atitit.短信 验证码 破解 v3 p34 识别 绕过 系统方案规划----业务相关方案 手机验证码 .doc 1. 手机短信验证码 vs 图片验证码 安全性(破解成本)确实要高一些1 1 ...
- 【安全测试】如何利用短信验证码BUG浪费公司的钱
一.背景 公司新产品体验,发现不少交互.UI.功能设计上的小问题.于是花了点时间随意挑了几个功能深入的玩了一下,顺手提了BUG.接口层,看了一下接口文档,简单测了一下接口,BUG其实还挺严重的,后面详 ...
- Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结
Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结 1. 验证码的前世今生11.1. 第一代验证码 图片验证码11.2. 第二代验证码 用户操作 ,比如 ...
- 超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...
- Laravel5中使用阿里大于(鱼)发送短信验证码
在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...
- JS发送短信验证码
<div> <input type="tel" id="mobile" name="mobile" placeholder ...
- Django商城项目笔记No.6用户部分-注册接口-短信验证码实现celery异步
Django商城项目笔记No.4用户部分-注册接口-短信验证码实现celery异步 接上一篇,如何解决前后端请求跨域问题? 首先想一下,为什么图片验证码请求的也是后端的api.meiduo.site: ...
随机推荐
- ATM机取款过程
假设一个简单的ATM机的取款过程是这样的:首先提示用户输入密码,最多只能输入三次,超过3次则提示用户“密码错误,请取卡”结束交易.如果用户密码正确,再提示用户输入取款金额,ATM机只能输出100元的纸 ...
- Mac新手入门:mac操作技巧
面对全新的mac电脑,你是不是一脸的迷茫,一些原来windows上的基本操作在mac上都不知道从何入手了,下面小编就为大家整理了一些基本的操作.相信一定会方便你的学习和工作的. 如何压缩与解压缩 在M ...
- 基于MaxCompute InformationSchema进行冷门表热门表访问分析
一.需求场景分析 在实际的数据平台运营管理过程中,数据表的规模往往随着更多业务数据的接入以及数据应用的建设而逐渐增长到非常大的规模,数据管理人员往往希望能够利用元数据的分析来更好地掌握不同数据表的使用 ...
- php next()函数 语法
php next()函数 语法 作用:将内部指针指向数组中的下一个元素,并输出.直线电机滑台 语法:next(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:在返回值之前 ...
- CF613D Kingdom and its Cities 虚树 + 树形DP
Code: #include<bits/stdc++.h> #define ll long long #define maxn 300003 #define RG register usi ...
- [luogu]P1169 [ZJOI2007]棋盘制作[DP][单调栈]
[luogu]P1169 [ZJOI]棋盘制作 ——!x^n+y^n=z^n 题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋 ...
- Xcode之增加环境变量(多种环境区分)
序言: Xcode默认有DEBUG何RELEASE模式,如果我们在项目中想增加预发布环境或者再增加多个环境呢?如果在项目中用if else 弄个全局变量来控制,每次打包之前去手动修改,这样不仅繁琐,而 ...
- String reduction (poj 3401
String reduction Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1360 Accepted: 447 D ...
- [NOIP2016]蚯蚓 题解
题目描述 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」= [3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓. ...
- celery的入门使用
一.安装步骤 二.使用方法 三.和Django结合 四.部署和监控