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;left:-100%;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>

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

转载于:https://www.cnblogs.com/cjh1111/p/6971801.html

HTML5实现输入密码（六个格子）相关推荐

HTML5 Canvas 绘制六叶草
注意: context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用,主要原因是最后参数和角度的关系.不管文档怎么说,按我的实际经验,逆顺时针=false时,是逆时针 ...
uniapp实现六个格子输入框
本文介绍两种方法第一种:用一个input加上六个span <template><view class="content"><view class=& ...
如何使用Createjs来编写HTML5游戏（六）完成一个简单的打飞机游戏（上）
打飞机游戏雷电是一款经典的空战游戏,利用已知的CreateJS知识就可以很容易的做出一款类似的打飞机游戏. 首先,弄一些游戏需要的资源,做这样的一个小游戏,首先需要一架玩家操控的飞机图片,然后是可以击 ...
HTML5和CSS3六CSS3三
代码下载地址线性渐变 linear-gradient(direction, color-stop1, color-stop2, -):线性渐变是沿着一条直线产生渐变效果. 值描述 directio ...
六数码问题（广搜_队列）
时限:1000ms 内存限制:10000K 总时限:3000ms 描述: 现有一两行三列的表格如下: A B C D E F 把1.2.3.4.5.6六个数字分别填入A.B.C.D.E.F格子中,每 ...
六边形格子地图坐标计算与转换
// 世界场景的一些数据管理,如提供坐标转换之类的接口var WorldMapManager = function () {this.mapSize = null; // 地图大小,像素this.cu ...
密室逃脱2碧绿色房间攻略
密室逃脱2碧绿色房间攻略: 注意:转向一般是点击画面的下方左右角:) 1.开灯,左转在鞋橱的鞋下边发现"若"字图片,鞋橱底发现镜框. 2.左转,在土黄色的垫子底下发现" ...
UVa 1531 - Problem Bee
题目:如图所看到的的蜂巢型的图中.蜜蜂想从A点飞到B点,假设A与B不在同一个正六边形中, 则它先飞到A的中心.每次飞到相邻格子的中心,最后飞到B的中心,再飞到B点: 假设在一个格子中.直接飞过去就可以 ...
css grid布局
最近在学习css grid布局,为了避免以后忘记了难得查资料,遍写在博客中方便以后查询! 1,display属性 display有三个值, grid :生成一个块级网格 inline-grid :生成 ...

HTML5实现输入密码（六个格子）

HTML5实现输入密码（六个格子）相关推荐

最新文章

热门文章