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

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

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

下面是贴代码:

html部分

支付密码设置

 css部分

JS部分

最后是界面效果

HTML5实现输入密码(六个格子)_第1张图片

你可能感兴趣的:(HTML,CSS,JavaScript)