HTML5实现输入密码(六个格子)

我的思路:用六个li充当六个格子,同时将input框隐藏,点击承载六个格子的容器时,使焦点聚焦在input上,可以输入。通过监听input框输入的长度,控制格子内小黑点是否显示,同时用正则替换非数字。

因为是用vue开发,并不是所有人粘贴就能使用,不过思路和实现过程都很简单明了。

下面是贴代码:

html部分

  <div id="payPwd">
    <div style="text-align: center">
      支付密码设置
    </div>
    <input ref="pwd" type="password" maxlength="6" v-model="msg"  style="position: absolute;z-index: -1;opacity: 0"/>
    <ul class="pwd-wrap" @click="focus">
      <li><i v-if="msgLength > 0"></i></li>
      <li><i v-if="msgLength > 1"></i></li>
      <li><i v-if="msgLength > 2"></i></li>
      <li><i v-if="msgLength > 3"></i></li>
      <li><i v-if="msgLength > 4"></i></li>
      <li><i v-if="msgLength > 5"></i></li>
    </ul>
  </div>

css部分

<style lang="less" scoped >
  html,body{
    width: 100%;
    height: 100%;
    background: #fbf9fe;
  }
  #payPwd .pwd-wrap{
    width: 90%;
    height: 44px;
    padding-bottom: 1px;
    margin: 0 auto;
    background: #fff;
    border:1px solid #ddd;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
  }
  .pwd-wrap li{
    list-style-type:none;
    text-align: center;
    line-height: 44px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border-right:1px solid #ddd ;
  }
  .pwd-wrap li:last-child{
    border-right: 0;
  }
  .pwd-wrap li i{
    height: 10px;
    width: 10px;
    border-radius:50% ;
    background: #000;
    display: inline-block;
  }
</style>

JS部分

<script>

  export default {
    components: {
    },
    data () {
      return {
        msg:‘‘,
        msgLength:0,
      }
    },
    created() {
    },
    computed: {
    },
    watch:{
      msg(curVal){
        if(/[^\d]/g.test(curVal)){
          this.msg = this.msg.replace(/[^\d]/g,‘‘);
        }else{
            this.msgLength = curVal.length;
        }
      },
    },
    methods: {
      focus(){
          this.$refs.pwd.focus();
      },
    }
  }

</script>

最后是界面效果,有些简单。

时间: 2024-11-09 14:22:10

HTML5实现输入密码(六个格子)的相关文章

HTML5 Canvas 描画六叶草

注意: context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用,主要原因是最后参数和角度的关系.不管文档怎么说,按我的实际经验,逆顺时针=false时,是逆时针旋转:逆顺时针=true时,是顺时针旋转.搞清楚这个,再来看角度.看下面语句: context.arc(x,y,r,getRad(60),getRad(120),false);这句话意思是以x,y为圆心,半径r画弧,逆时针转60度为起始点,逆时针转120度为终止点.另外逆顺时针不要换来换去,坚持习惯

在这个夏天与Html5不期而遇(六)

一.写导航时的命名: nav:导航 mainnav:主导航 subnav:子导航 topnav:顶部导航 sidebar:边缘导航 leftsidebar:左侧导航 rightsidebar:右侧导航 menu:菜单部分 submenu:子菜单部分 title:标题 summary:摘要 二.写功能栏时的命名: logo:标志 banner:广告 login:登录 loginbar:登录条 regsiter:注册 search:搜索 shop:功能区 joinus:加入 status:状态 bt

六数码

时限:1000ms 内存限制:10000K  总时限:3000ms 描述 现有一两行三列的表格如下: A B CD E F 把1.2.3.4.5.6六个数字分别填入A.B.C.D.E.F格子中,每个格子一个数字且各不相同.每种不同的填法称为一种布局.如下: 1 3 52 4 6布局1 2 5 64 3 1布局2 定义α变换如下:把A格中的数字放入B格,把B格中的数字放入E格,把E格中的数字放入D格,把D格中的数字放入A格.定义β变换如下:把B格中的数字放入C格,把C格中的数字放入F格,把F格中的

【日常学习】【最短路Dijkstra】codevs1069 usaco回家 题解

来源 usaco codevs1069 题目描述 Description 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一只最快的母牛). 在挤奶的时候(晚餐前),每只母牛都在她自己的牧场上,一些牧场上可能没有母牛. 每个牧场由一条条道路和一个或多个牧场连接(可能包括自己). 有时,两个牧场(可能是字母相同的)之间会有超过一条道路相连. 至少有一个牧场和谷仓之间有道路连接. 因此

UVa 1531 - Problem Bee

题目:如图所示的蜂巢型的图中,蜜蜂想从A点飞到B点,如果A与B不在同一个正六边形中, 则它先飞到A的中心,每次飞到相邻格子的中心,最后飞到B的中心,再飞到B点: 如果在一个格子中,直接飞过去即可(观察第二组数据). 分析:计算几何.设格子边长为a. 首先观察,所有格子的中心为(3xa/2,sqrt(3)ya/2),其中x.y为整数且奇偶性相同: 因此,根据给定点的坐标,可以求出A,B所在的格子的行列编号(处理奇偶性不同情况): (由于,是取整计算,所以要要判断周围六个格子,是不是比自己更适合):

几款优秀的国内wordpress主题和其作者网站推荐

这篇文章分享的是几款非常优秀的.值的花钱购买的收费wordpress中文主题.主题作者的网站用的就是各自开发的wordpress主题. 这些主题设计简洁.精美,功能齐全,兼容性好,响应式布局,各类小工具,强大的后台. 最重要的是,这些wordpress中文主题的作者是在一直持续不断的更新维护他们的主题,在不同的市场环境和技术背景之下,他们也会采用不同的技术和设计来升级他们的主题,购买之后,将会享受到持续的更新维护服务. 特别声明:本文绝不是广告,龟仙岛致力于发现用于站长建站的好东西,只是客观的将

手机游戏开发遇人才荒,十万年薪翘首待

随着4G时代已经来临,手机游戏又迎来了新的蓬勃期. 手机游戏开发已经成为拉动经济增长的重要引擎.2009年至2014年,国内手机游戏开发市场迎来了快速发展时期.越来越多的用户通过手机登陆互联网,这也令中国手机游戏开发市场大受裨益. 经过这些年3G时代下的智能手机用户导入期后,业内人士预测,3G/4G手机游戏开发将会呈现迅速发展的势头,相关的游戏开发工程师也将步入极繁荣时期. "随着通讯技术的不断发展,为国内的相关手机游戏开发业注入了强心剂."工信部软件服务业司郭建兵副司长说到. 统计数

Node.js 网页瘸腿爬虫初体验

延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // 内置文件处理模块 var fs=require('fs'); // 创建一个将流数据写入文件的WriteStream对象 var outstream=fs.createWriteStream('./1.txt'); /

Mavlink协议理解

来源:blog.csdn.net/super_mice/article/details/44836585 之前看了mavlink协议,网上关于mavlink的资料不多.本文大概总结了下对mavlink协议的理解.以下如不说明都是说mavlink v1.0版本. 首先附上mavlink的各个消息的简介https://pixhawk.ethz.ch/mavlink/(这里的内容很多,建议大概了解mavlink后再去浏览), mavlink协议介绍http://qgroundcontrol.org/m