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>9909</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:0;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 #888888;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:0;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:80%;margin:10px auto;} .realInput{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;resize: none;outline: none;border:0;z-index: 1;position: absolute;width:186px;height: 32px;line-height: 32px;background: none;display: block;left:50%;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: {} }
转载于:https://www.cnblogs.com/juewuzhe/p/7872382.html
vue,一路走来(14)--短信验证码框的实现(类似支付密码框)相关推荐
- vue实现通过手机号发送短信验证码登录
<template><div class="get-mobile" @touchmove.prevent><div class="main& ...
- 用VUE实现注册页(短信验证码登录)
2 一.实现效果图 二.实现代码 1.实现头部 <template><div class= ...
- 短信验证码“最佳实践”
1.背景 年初,从外地转移阵地到西安,转眼已两个多月.很久不写业务代码了,到了新公司,条件恶劣到前所未有,从需求,设计,架构,实现,实施,测试,bug修复,项目计划制定,项目管理,全他妈我一个人,关键 ...
- Java发送短信验证码
随着科技的发展手机短信验证码随处可见,用户注册,修改密码,更改个人信息时候都用得到短信验证码确认.下面教大家如何使用Java来发送手机短信验证码. 首先,申请一个阿里云账户(申请账户略 ...
- Java实现短信验证码最佳实践
1.背景 2.实现 3.运行效果: 4.源码 5.总结 1.背景 年初,从外地转移阵地到西安,转眼已两个多月.很久不写业务代码了,到了新公司,条件恶劣到前所未有,从需求,设计,架构,实现,实施,测试, ...
- 【5分钟教你】3种实现验证码功能-数字短信验证码-图形验证码-滑动验证码
摘要:我们在做一些后台系统的登录验证的时候.难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验 ...
- 短信验证码的作用是什么?如何选择靠谱的短信验证码平台?
验证码常被用于网站.移动应用注册.登录等环节的身份核验,以证明当前的账号操作与所绑定的手机号码的一致性. 短信验证码的出现,为账号+密码登录又增加了一道防线.以往网站和移动应用在注册.登录.支付或是密 ...
- 使用云函数构建短信验证码服务的案例
背景 通过手机短信发送验证码,是最普遍.最安全验证用户真实身份的方式.目前,短信验证码广泛应用于用户注册.密码找回.登录保护.身份认证.随机密码.交易确认等应用场景. 原理 短信验证的原理按步骤可分为 ...
- 阿里云——Java实现手机短信验证码功能
目录 如何实现短信验证码功能 1.准备工作 1.1 注册 阿里云 账号,并完成实名认证.找到短信服务功能. 1.2 开通短信服务 1.3 签名与模板 1.4 获取AccessKey 1.5 打开短信控 ...
最新文章
- NOI.AC NOIP模拟赛 第六场 游记
- 生活永远这样,在自己放松自己的时候,会让你摔个跟头,忍耐生老练,老练生盼望...
- Python之gmplot:gmplot库的简介、安装、使用方法之详细攻略
- Apache Dubbo 3.0.0 正式发布 - 全面拥抱云原生
- 数据库管理系统与数据库系统
- 2020.2idea创建web_IntelliJ IDEA 2017.3 完整的配置Tomcat运行web项目教程(多图)
- OpenShift 4 MTC - 从 OpenShift 3 向 OpenShift 4 迁移应用
- 【ECharts学习】—实现我的第一个图表
- Bootstrap(5)栅格系统
- Spring中的设计模式学习
- mysql可重复度能解决幻读吗
- dex2jar .\classes.dex - .\classes-dex2jar.jar com.googlecode.d2j.DexException: not support version
- 数据分析(经典泰坦尼克号竞赛入门题)
- 捋一捋Android的转场动画
- #SATA# SATA 实际管脚接线图
- 一个作业题---用python创建一个通讯录
- 无线短距离通信-蓝牙与wifi(一)
- c语言程序与化学有关的程序,化工热力学C语言程序.doc
- SFP端口是什么?有什么作用?可以接RJ45吗?
- navbar-default、navbar-brand(logo栏)、navbar-text
热门文章
- OpenCV 透视变换
- C语言 字符串转换成int、long和double型
- mfc连接ubuntu mysql数据库_Ubuntu 16.04 Linux系统下使用C++连接mysql数据库
- yum的方式安装mysql_Linux安装mysql之yum安装方式
- adobe Photoshop CS6 MAC中文版
- 【工具类】时间相关的方法
- Python3网络爬虫快速入门实战解析(一小时入门 Python 3 网络爬虫)
- 面试题目4:二维数组中的查找
- 《OpenGL超级宝典第5版》学习笔记(一)—— 第一个OpenGL程序
- windows API(一)