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

中午听到别人在讨论微信的支付框以及支付宝的支付框,于是自己写了个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 条评论
登录 后参与评论

相关文章

来自专栏小白课代表

Axure RP 7.0 安装教程

1166
来自专栏PPV课数据科学社区

Excel2007中的数据分析工具在哪里?

相信有很多朋友对Excel2003是有着深厚的感情,但是随着时代的发展不得不升级用Excel2007、2010甚至2013,今天有这样一位朋友问我,Excel2...

2724
来自专栏rublog的专栏

【腾讯云的1001种玩法】腾讯云备份手机照片、办公室文档、手机电脑快速传图

时时备份我最喜欢dropbox,所以决定自己搭建备份服务器。本文给大家讲述通过Syncthing开源的客户端,在腾讯云部署环境备份手机照片、办公室文档、手机电脑...

9250
来自专栏java思维导图

扫码登录是如何实现的?

网页版微信刚推出时,无数人被它的登录方式惊艳了一下,不需要输入用户名密码,打开手机微信扫一扫,便自动登录。从原理上讲,二维码只能是一段文本的编码,如何用它实现快...

1792
来自专栏实战docker

docker下载镜像慢怎么办?daocloud加速器来帮你

使用docker pull命令下载镜像的时候,常遇到连接超时或者下载很慢的情况,例如docker pull bolingcavalry/bolingcavalr...

2418
来自专栏非著名程序员

推荐一款超级下载利器工具,突破网盘的下载限制

目前随着网盘一步一步的关闭或者收费,目前能用的网盘已经不多了,百度网盘目前是为数不多的,暂时没有关闭或者收费的网盘。但是我们都知道,下载网盘里的东西的时候,各种...

952
来自专栏bdcn

Node安装node-sass总是下载超时问题解决

我们在Jenkins自动构建node时,如果用到了sass总是会自动去下载平台相关的安装包,首先要知道的是,安装 node-sass 时在 node scrip...

813
来自专栏木子昭的博客

markdown一键转换到微信公众号编辑器格式(送MarkEditor激活码)

MarkEditor是我目前找到的,将markdown转换为微信公众号格式, 最为方便的软件, 功能很强大, 官网: https://www.markedito...

1622
来自专栏MixLab科技+设计实验室

技能之用iMovie制作预告片

hi,这是系列文章:技能之xxx的第1篇。 我为什么写这个系列的文章。因为我正在做一款app,我在团队中主抓产品设计、UX/UI设计、部分前端开发,少量运营。在...

27411
来自专栏施炯的IoT开发专栏

A Windows Mobile GPS Application Sample – Using Fake GPS

    Windows Mobile 6.0 Emulator问世以前,很多和设备相关的功能在Emulator上就无法进行调试和验证,比如Phone、GPS和B...

1976

扫码关注云+社区