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

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

相关文章

来自专栏星汉技术

原 Spark On Yarn完全分布式搭

3475
来自专栏Java成长之路

Solr入门

本文主要介绍solr的基本用法。首先,我们从Apache官网下载solr的二进制分发包,然后解压缩文件。安装完成后,我们将启动solr服务器,并通过浏览器访问s...

331
来自专栏Albert陈凯

Hadoop数据分析平台实战——110Hive介绍和Hive环境搭建离线数据分析平台实战——110Hive介绍和Hive环境搭建

离线数据分析平台实战——110Hive介绍和Hive环境搭建 Hive介绍 Hive是构建在Hadoop之上的数据仓库平台,设计目标就是将hadoop上的数据操...

2688
来自专栏Jed的技术阶梯

Hadoop完全分布式集群搭建

集群中只有mapred-site.xml.template,可以从这个文件进行复制

621
来自专栏北京马哥教育

Hadoop2.2.0 的安装和基本配置

Hadoop2.0的架构和1.0完全不一样,在安装配置上和1.0也有很大的不同,譬如配置文件的目录不一样了,还有要对yarn进行配置,这个在1.0是没有的。很多...

2624
来自专栏祝威廉

StreamingPro 支持类SQL DSL

受spark sql在喜马拉雅的使用之xql 这篇文章影响,我发现类似下面这种语法是极好的:

411
来自专栏我是攻城师

设置Hadoop+Hbase集群pid文件存储位置

33513
来自专栏编程心路

在CentOS中搭建Hadoop

JDK:OpenJDK1.8.0 (强力建议不要使用 Oracle 公司的 Linux 版本的 JDK)

882
来自专栏云计算教程系列

如何在Ubuntu 16.04上安装和配置OrientDB

OrientDB是一个多模型NoSQL数据库,支持图形和文档数据库。它是一个Java应用程序,可以在任何操作系统上运行。它也完全支持ACID,支持多主复制,可轻...

1413
来自专栏https://www.cnblogs.com/L

【Hadoop篇】--Hadoop常用命令总结

1、启动hadoop所有进程 start-all.sh等价于start-dfs.sh + start-yarn.sh

1061

扫码关注云+社区