由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现。

思路:每个小方框其实就是单独的每一个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)--短信验证码框的实现(类似支付密码框)的更多相关文章

  1. SpringSceurity(5)---短信验证码登陆功能

    SpringSceurity(5)---短信验证码登陆功能 有关SpringSceurity系列之前有写文章 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSecur ...

  2. 23、vue实现获取短信验证码

    1.html页面: <el-form-item prop="phoneCode" class="pr"> <el-input placehol ...

  3. atitit.短信 验证码  破解  v3 p34  识别 绕过 系统方案规划----业务相关方案 手机验证码  .doc

    atitit.短信 验证码  破解  v3 p34  识别 绕过 系统方案规划----业务相关方案 手机验证码  .doc 1. 手机短信验证码 vs 图片验证码 安全性(破解成本)确实要高一些1 1 ...

  4. 【安全测试】如何利用短信验证码BUG浪费公司的钱

    一.背景 公司新产品体验,发现不少交互.UI.功能设计上的小问题.于是花了点时间随意挑了几个功能深入的玩了一下,顺手提了BUG.接口层,看了一下接口文档,简单测了一下接口,BUG其实还挺严重的,后面详 ...

  5. Atitit. 破解  拦截 绕过 网站 手机 短信 验证码  方式 v2 attilax 总结

    Atitit. 破解  拦截 绕过 网站 手机 短信 验证码  方式 v2 attilax 总结 1. 验证码的前世今生11.1. 第一代验证码 图片验证码11.2. 第二代验证码  用户操作 ,比如 ...

  6. 超实用的JavaScript代码段 Item4 --发送短信验证码

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

  7. Laravel5中使用阿里大于(鱼)发送短信验证码

    在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...

  8. JS发送短信验证码

    <div> <input type="tel" id="mobile" name="mobile" placeholder ...

  9. Django商城项目笔记No.6用户部分-注册接口-短信验证码实现celery异步

    Django商城项目笔记No.4用户部分-注册接口-短信验证码实现celery异步 接上一篇,如何解决前后端请求跨域问题? 首先想一下,为什么图片验证码请求的也是后端的api.meiduo.site: ...

随机推荐

  1. 转Serial,Parallel,CMS,G1四大GC收集器特点小结

    转 https://blog.csdn.net/u013812939/article/details/48782343 1.Serial收集器 一个单线程的收集器,在进行垃圾收集时候,必须暂停其他所有 ...

  2. LeetCode--041--缺失的第一个整数(java)

    给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3 示例 2: 输入: [3,4,-1,1] 输出: 2 示例 3: 输入: [7,8,9,11 ...

  3. proxyTable-后端代理-跨域请求数据

    config >>> index.js  配置 proxyTable: { '/api': { target:'https://api.jisuapi.com', // 你请求的第三 ...

  4. github上拉去代码执行 npm install报错code:128

    npm ERR! code npm ERR! Command failed: D:\Program Files\Git\cmd\git.EXE clone --mirror -q git://gith ...

  5. OC + RAC(一) RACSignal 基本使用

    -(void)_test1{ //测试RAC流程 发送next类型事件 以completed结束时: //至于有无 sendCompleted 的区别主要是用在需要知道信号状态 NSLog(@&quo ...

  6. Fiddler抓包工具-拦截,断点

    1.拦截网页 先拦截请求-F11设置拦截 -F12抓包 2.修改金额 宽带 下行:100M上行:8M 一般家用的都是下行高,企业用都是上下行对等.企业要搭建网站就需要上行. 我们去访问网站,服务器根据 ...

  7. 冲刺CSP-S集训考试反思+其它乱写(密码私信)

    RT.开坑. 10.1 开门黑23333. 放假回来稍困,而且感冒似乎愈加严重,导致我正常考试基本睁不开眼.一个小时勉强把题读懂,神志恍惚如斯. 看T2觉得估计又是各种推柿子堆定理的数学大题,写了个暴 ...

  8. 我的Podfile如下

    # Uncomment this line to define a global platform for your projectuse_frameworks!(http://www.my516.c ...

  9. 定义一个JobService,开启本地服务和远程服务

    @SuppressWarnings(value = ["unchecked", "deprecation"])@RequiresApi(Build.VERSIO ...

  10. windown 使用python 自动切换网络

    由于工作环境的特殊性,有时需要切换到内网工作,有时需要通过手机连接外网,想自动运行一个脚本就做完这事 首先在PC机上安装一个无线网卡,例如360wifi就可以. 除了python,还用到了DOS命令, ...