模拟微信支付宝密码输入框的效果

中午听到别人在讨论微信的支付框以及支付宝的支付框,于是自己写了个demo出来,原理很简单,通过隐藏input,使用label控制显示,实现起来很容易。唤起数字键盘采用了tel的type。

在线演示地址:

源码如下:

<!DOCTYPE html>

<html>

<head>

<title>模拟密码输入框效果-练小习-caihong.cc</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<style>

*{

margin: 0;

padding: 0;

list-style: none;

}

body{

-webkit-tap-highlight-color: transparent;

font-family: "Helvetica Neue",Helvetica,STHeiTi,Arial;

font-size: 12px;

background-color: #f0f0f0;

}

h1{

font-size: 14px;

font-weight: 400;

text-align: center;

color: #ff6600;

padding: 0 0 20px;

}

.box{

margin: 20px;

padding: 20px;

background: #fff;

text-align: center;

}

input{

margin: 0;

padding: 0;

width: 1px;

opacity: 0;

height: 1px;

border: none;

}

label{

display: block;

}

ul{

border: 1px solid #c8c8c8;

font-size: 0;

display: inline-block;

position: relative;

font-size: 0;

}

ul li{

display: inline-block;

width: 35px;

height: 35px;

font-size: 24px;

font-weight: 700;

text-align: center;

line-height: 40px;

border-left: 1px solid #e6e6e6;

vertical-align: middle;

overflow: hidden;

}

ul li:first-child {

border-left: none;

}

a{

height: 30px;

padding: 0 20px;

border: 1px solid #0064b6;

border-radius: 3px;

background: #0071ce;

color: #fff;

font-size: 14px;

line-height: 30px;

text-align: center;

display: inline-block;

outline: 0 none;

text-decoration: none;

margin-top: 40px;

}

.show{

padding: 20px;

}

em{

font-style: normal;

color: #ff6600

}

</style>

</head>

<body>

<div class="box">

<h1>模拟密码输入框</h1>

<label for="ipt">

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</label>

<input type="tel" id="ipt" maxlength="6">

<a href="javascript:void(0);">确认</a>

<div class="show">您输入的密码:<em></em></div>

</div>

<script>

$('input').on('input', function (e){

var numLen = 6;

var pw = $('input').val();

var list = $('li');

$('em').text($('input').val());

for(var i=0; i<numLen; i++){

if(pw[i]){

$(list[i]).text('*');

}else{

$(list[i]).text('');

}

}

});

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

通过Chocolatey软件包管理器安装.NET Core

1633
来自专栏FreeBuf

漏洞预警 | 微软Patch Tuesday修复三则重要漏洞

微软在Patch Tuesday中修复了53个安全漏洞,涉及的产品包括Windows操作系统、Office、Internet Explorer、Microsof...

21210
来自专栏逸鹏说道

Git技巧:右键菜单怎么去除?

如果你是按照 http://www.cnblogs.com/dunitian/p/5034624.html 那么你就没有这么多蛋疼的菜单了(反之:vs帮你安装的...

2683
来自专栏逆向技术

win32之进程概念

  学习WindowsAPI. 之前.我们必须理解什么是进程. 在windows环境下.进程就是一个运行起来的exe程序

712
来自专栏图像识别与深度学习

2018-06-13 ubuntu16.04.4 U盘安装

2066
来自专栏张善友的专栏

Windows Server AppFabric正式发布

Windows Server AppFabric 是一组集成技术,可更轻松地生成、扩展和管理 IIS 上运行的 Web 应用程序和复合应用程序,它是一款主要面向...

1988
来自专栏blackheart的专栏

MSBuild入门

MSBuild是什么? MSBuild全称(Microsoft Build Engine),是用于构建应用程序的平台。您可能不知道它,但是如果您在使用VS做开发...

2228
来自专栏张善友的专栏

.NET Web 自动化测试工具

Inspired by Watir development of WatiN started in December 2005 to make a simila...

1799
来自专栏腾讯玄武实验室的专栏

深入解析 DLL 劫持漏洞

2010 年 8 月,微软发布安全通报 2269637,同时网上公布了大量受影响软件的名字,DLL 劫持漏洞开始进入大家的视野。

6380
来自专栏张善友的专栏

通过Chocolatey软件包管理器安装.NET Core

在Linux的世界里,有了yum/apt-get百分之九十的软件都可以通过它来安装管理。但是在Windows系统上,装个软件还是挺折腾的。比如我要装个Chrom...

2017

扫码关注云+社区