分享一个PC端六格密码输入框写法
如图。我们一般做商城类的项目不免会用到支付密码输入框，我研究了下并决定发上来，也当作是自己成长路上的一点小小的记录。本次介绍的是基于vue的项目
html：
<template><div class='am_payPwd' :id="`ids_${id}`"><input type="password"maxlength="1"@input="changeInput"@click="changePwd"v-model="pwdList[i]"@keyup="keyUp($event)"@keydown="oldPwdList = pwdList.length"class="shortInput"v-for="(v, i) in 6" :key="i"></div> </template>
css:
.am_payPwd {display: inline-block;width: 242px;height: 40px;border: 1px solid #999;border-radius: 5px;padding: 10px 0;position: relative;margin-left: 1px;.shortInput {text-align: center;font-size: 20px;float: left;width: 40px;height: 20px;color: #333;outline: #ff0067;&:not(:last-child) {border-right: 1px solid #999;}}
}js:
data () {return {pwdList: [],oldPwdList: [],isDelete: false,ipt: ''}},props: {id: String, // 当一个页面有多个密码输入框时，用id来区分default: '1'},mounted () { this.ipt = document.querySelectorAll(`#ids_${this.id} .shortInput`)},methods: {keyUp (ev) {let index = this.pwdList.lengthif (!index) returnif (ev.keyCode === 8) {this.isDelete = trueif (this.oldPwdList === this.pwdList.length) {if (index === this.pwdList.length) {this.pwdList.pop()}index--} else {index > 0 && index--}this.ipt[index].focus()} else if (this.isDelete && index === this.pwdList.length && /^\d$/.test(ev.key)) {this.isDelete = falsethis.pwdList.pop()this.pwdList.push(ev.key)this.ipt[this.pwdList.length] && this.ipt[this.pwdList.length].focus()}this.$emit('getPwd', this.pwdList.join(''))},changePwd () {let index = this.pwdList.lengthindex === 6 && index--this.ipt[index].focus()},changeInput () {let index = this.pwdList.lengthlet val = this.pwdList[index - 1]if (!/[0-9]/.test(val)) { this.pwdList.pop() return }if (!val) {this.pwdList.pop()index--if (index > 0) this.ipt[index - 1].focus()} else {if (index < 6) this.ipt[index].focus()}}}
如有考虑不周的，请指出
每一次的记录，都是向前迈进的一步相关文章：
【数据库】sqlite中PRAGMA命令说明
关于sqlite中PRAGMA的说明网上已经有很多了，这里不再复制粘贴，只把内容最全的网址连接记录一下： 官网说明（英文）：https://sqlite.org/pragma.html 中文翻译，参见博客：https://www.i…
思科交换机各类型中字母的意思？
24TC-L中各字母的意思分别指? 24TT-L中第二个T的意思? 2960和2960G的区别？基中G是什麽意思? F0/1和G0/1区别？ 24代表是24个网络接口 第一个T表示TX，也就是所谓RJ-45的类型（指这个24个接口都是RJ-45，若是P的话&#…
医生还未失业，IBM Watson已跌入深渊 | 极客头条
点击上方↑↑↑蓝字关注我们~作者 | Eliza Strickland译者 | Major编辑 | 琥珀出品 | AI 科技大本营（公众号ID：rgznai100）导语：2011 年，Jeopardy! 挑战赛的成功，让外界看到 IBM 的人工智能给医学带来的革命…
【Qt】Qt容器总结
目录 一、容器类1、顺序容器2、关联容器二、Qt容器特点三、迭代器1、Jave样式的迭代器（效率略低）2、SLT样式的迭代器注意： 由于Qt的容器是写时复制的，因此非const访问器从本质上讲更加昂贵， 因为它们必须首先检查是否需要复制基础数据（并在必要时进行复制）。 因此，在Qt…
Java5线程并发库之保障变量的原子性操作
为什么80%的码农都做不了架构师？>>> java.util.concurrent.atomic 首先我们看java.util.concurrent.atomic包，它主要是提供一些为各种数据类型变量提供原子性操作的类。 AtomicInteger 比如我们来看AtomicInteger类，大家在写程序…
EIGRP OSFP 利用NULL0接口防止路由环路 Loopback Null0接口揭秘
在EIGRP中，只要发生总结就会在路由表中自动产生一条指向NULL0的路由条目，这条路由的直接意思是：匹配这条路由的数据包会被路由器丢掉。它的目的是为了避免在某些情况下产生路由环路。 以第三四学期的中文书P86中的图4-15为例做个说明…
【C++】C++11 STL算法(一)：非修改序列操作（Non-modifying sequence operations）
目录一、all_of、any_of、none_of：1、官方说明2、谓词3、STL算法对谓词的说明4、谓词的五种模式5、all_of （C 11）6、any_of （C 11）7、none_of（C 11）8、官方demo：二、for_each1、原型…
Python openpyxl 之 Excel 文档简单操作
背景：生活中常常因日常工作，在记录统计方面需频繁处理较多 Excel 表格，这部分工作虽可由人工完成，但这样会显得有些繁琐且可能存在偏差，遂闲时查阅了是否有相关基于python处理Excel表格的学习文档，后获知这…
售价910元！周志华等人英文新书《演化学习》出炉！
点击上方↑↑↑蓝字关注我们~整理 | 琥珀出品 | AI 科技大本营（公众号ID：rgznai100）关于人工智能教育，从学生培养方案，到课程设置、教材，甚至是授课老师，全国各大高校正探索一条新道路。先是从去…
linux 查看 文档 不显示注释 命令
原文：http://www.weiruoyu.cn/?p661 最近发现一个很好的命令，就是linux 查看 文档 不显示注释 的命令[rootlocalhost ha.d]# cat ha.cf |grep -v ^# logfile /var/log/ha-log 转载于:https://blog.51cto.com/weiruoyu/705840
【C++】C++11 STL算法(二)：修改序列的操作（Modifying sequence operations）
目录一、copy、copy_if1、原型：2、说明：3、官方demo二、copy_n1、原型：2、说明：3、官方demo三、copy_backward1、原型：1、说明：1、官方demo四、move1、原型：2、说明：3、官方demo五、…
ECharts测量图,功率图
/*** 测量图，功率图1，仪表盘*/ mainpage.prototype.initEcharsGLT1 function(oneJZ){ //if(myChartGLT1 null && myChartGLT1 ! "" && myChartGLT1 ! undefined) {myChartGLT1.dispose(); //每次加载之前清除之前的echar…
北京智源人工智能研究院启动“智源学者计划”，与旷视发布首个智源联合实验室
4月16日，北京智源人工智能研究院与中国人工智能领军企业旷视召开“智源学者计划暨联合实验室发布会”。北京市科委副主任张光连，海淀区委常委、副区长李俊杰，以及来自科技部、北京市科委、海淀区人民政府、朝阳区人民政府、中关村管委会&…
配置隧道模式的IPSec.×××
一、拓扑及IP配置 二、配置清单 R1#show run Building configuration... Current configuration : 1449 bytes ! upgrade fpd auto version 12.4 service timestamps debug datetime msec service timestamps log datetime msec no service password-encryption ! hostname R1 …
【C++】C++11 STL算法(三)：分隔操作（Partitioning operations）、排序操作（Sorting operations）
目录分隔操作（Partitioning operations）一、is_partitioned1、原型：2、说明：3、官网demo二、partition1、原型：2、说明：3、官方demo三、partition_copy1、原型：2、说明：3、官方demo四…
浪潮发布重磅产品“元脑”，专注AI全栈能力输出
整理 | 一一出品 | AI科技大本营（ID:rgznai100）4月16日，以“智慧凝聚”为题的IPF2019浪潮云数据中心合作伙伴大会在上海举办。大会重点聚焦浪潮“智慧计算”战略，以AI计算力和创新力，联接、承载、赋能合作伙伴。为了布…
React+Redux+中间件
MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在…
ピエタ～幸せの青い鳥～相关
先打全所有升级补丁 不然没有end4 补丁下载页 4个end出现方法 只看律视角 选项任意→end1 只看愛视角 选项任意→end2 检查一下 这两个流程的CG是否收全了 开启唯视角以后有些CG是找不回的 只看唯视角 选项任意→end3 只看唯视角 最后一个选项选“唯” 此后只要律或愛的视角开…
【C++】C++11 STL算法(四)：二分查找法（Binary search operations）、合并操作
目录一、lower_bound1、原型：2、说明：3、官方demo二、upper_bound1、原型：2、说明：3、官方demo三、binary_search1、原型：2、说明：3、官方demo四、equal_range1、原型：2、说明：3、官…
腾讯开源分布式NoSQL存储系统DCache | 技术头条
作者 | 山宝银，腾讯后台高级工程师，专注于分布式 NoSQL 存储领域的技术研发工作，参与腾讯多个自研存储系统的开发，在分布式系统、高可用与高性能服务等领域有较丰富的经验。来源 | 腾讯技术博客当你在电商平台秒杀商品或者在社交网…
老司机带你学爬虫——Python爬虫技术分享
什么是“爬虫”？ 简单来说，写一个从web上获取需要数据并按规定格式存储的程序就叫爬虫； 爬虫理论上步骤很简单，第一步获取html源码，第二步分析html并拿到数据。但实际操作，老麻烦了~ 用Python写“爬虫”有哪…
[转载]分享WCF聊天程序--WCFChat
http://www.cnblogs.com/gaoweipeng/archive/2009/09/04/1560260.html 无意中在一个国外的站点下到了一个利用WCF实现聊天的程序，作者是：Nikola Paljetak。研究了一下，自己做了测试和部分修改，感觉还不错，分享给大家。…
【C++】C++11 STL算法(五)：设置操作(Set operations)、堆操作(Heap operations)
目录设置操作(Set operations)一、includes1、原型：2、说明：3、官方demo二、set_difference1、原型：2、说明：3、官方demo三、set_intersection1、原型：2、说明：3、官方demo四、set_symmetric_difference1、…
63万张！旷视发布最大物体检测数据集Objects365 | 技术头条
编辑 | 琥珀来源 | AI科技大本营（id：rgznai100）昨日，在旷视科技联合北京智源人工智能研究院举办的发布会上，旷视研究院发布了物体检测数据集 Objects365，包含 63 万张图像数量，365 个类别数量&a…
（一）Android Studio 安装部署 华丽躲坑
叨叨两句先 小宇之前一直做前后端开发，只是略懂JS，未接触过Java和Android 近期工作任务也是兴趣使然，开始琢磨DJI二次开发 DJI是我最服气的无人机厂商，无人机稳定性极强，性价比狂高，还给了极度丰富的二次开…
linux 环境配置 安装jdk
一. 下载jdk5.0 for linux 到sun的主页 http://java.sun.com/j2se/1.5.0/download.jsp 下载jdk安装文件jdk-1_5_0_05-linux-i586.bin 二. 解压安装jdk 在shell终端下进入jdk-1_5_0_05-linux-i586.bin文件所在目录，执行命令 ./jdk-1_5_0_05-linux-i586.bin 这时会出现…
【C++】C++11 STL算法(六)：最小/最大操作(Minimum/maximum operations)、比较运算(Comparison operations)
目录最小/最大操作(Minimum/maximum operations)一、max1、原型：2、说明：3、官方demo二、max_element1、原型：2、说明：3、官方demo三、min1、原型：2、说明：3、官方demo四、min_element1、原型：2…
springboot之定时任务
定时线程 说到定时任务，通常会想到JDK自带的定时线程来执行，定时任务。 回顾一下定时线程池。 public static ScheduledExecutorService newScheduledThreadPool(int var0) {return new ScheduledThreadPoolExecutor(var0);}public static ScheduledExec…
10只机器狗拉卡车！井然有序，毫不费力 | 极客头条
整理 | 琥珀出品 | AI科技大本营（ID:rgznai100）看来，这家娱乐网友多年的机器人公司终于要开始实现商用化了！最先备受期待的是它的网红机器狗 SpotMini。今日凌晨，据多家外媒报道，波士顿动力 (Boston Dynami…
linux下查看nginx，apache，mysql，php的编译参数
有时候nginx，apache，mysql，php编译完了想看看编译参数可以用以下方法 nginx编译参数： #/usr/local/nginx/sbin/nginx -V nginx version: nginx/0.6.32 built by gcc 4.1.2 20071124 (Red Hat 4.1.2-42) configure arguments: --us…