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: ...
随机推荐
- 转Serial,Parallel,CMS,G1四大GC收集器特点小结
转 https://blog.csdn.net/u013812939/article/details/48782343 1.Serial收集器 一个单线程的收集器,在进行垃圾收集时候,必须暂停其他所有 ...
- LeetCode--041--缺失的第一个整数(java)
给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3 示例 2: 输入: [3,4,-1,1] 输出: 2 示例 3: 输入: [7,8,9,11 ...
- proxyTable-后端代理-跨域请求数据
config >>> index.js 配置 proxyTable: { '/api': { target:'https://api.jisuapi.com', // 你请求的第三 ...
- github上拉去代码执行 npm install报错code:128
npm ERR! code npm ERR! Command failed: D:\Program Files\Git\cmd\git.EXE clone --mirror -q git://gith ...
- OC + RAC(一) RACSignal 基本使用
-(void)_test1{ //测试RAC流程 发送next类型事件 以completed结束时: //至于有无 sendCompleted 的区别主要是用在需要知道信号状态 NSLog(@&quo ...
- Fiddler抓包工具-拦截,断点
1.拦截网页 先拦截请求-F11设置拦截 -F12抓包 2.修改金额 宽带 下行:100M上行:8M 一般家用的都是下行高,企业用都是上下行对等.企业要搭建网站就需要上行. 我们去访问网站,服务器根据 ...
- 冲刺CSP-S集训考试反思+其它乱写(密码私信)
RT.开坑. 10.1 开门黑23333. 放假回来稍困,而且感冒似乎愈加严重,导致我正常考试基本睁不开眼.一个小时勉强把题读懂,神志恍惚如斯. 看T2觉得估计又是各种推柿子堆定理的数学大题,写了个暴 ...
- 我的Podfile如下
# Uncomment this line to define a global platform for your projectuse_frameworks!(http://www.my516.c ...
- 定义一个JobService,开启本地服务和远程服务
@SuppressWarnings(value = ["unchecked", "deprecation"])@RequiresApi(Build.VERSIO ...
- windown 使用python 自动切换网络
由于工作环境的特殊性,有时需要切换到内网工作,有时需要通过手机连接外网,想自动运行一个脚本就做完这事 首先在PC机上安装一个无线网卡,例如360wifi就可以. 除了python,还用到了DOS命令, ...