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

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

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

2147
来自专栏逆向技术

win32之进程概念

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

932
来自专栏林德熙的博客

解决 VS 跳转定义和 Resharper 重复

在大约一周之前,Visual Studio 进行了一项更新,增加了 Ctrl+Click 点击跳转到定义的功能。这项功能与 ReSharper 重复了。

1581
来自专栏Crossin的编程教室

Windows 下的包管理器

这是一篇读者投稿。 包管理器的概念源自 Linux,与 Windows 单独下载安装软件不同,包管理器可以管理各种软件,做到统一的安装、更新和删除。某种程度上来...

3535
来自专栏GuZhenYin

Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)

前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于SignalR Core的文章了. 先介绍一下Si...

3789
来自专栏大内老A

“前.NET Core时代”如何实现跨平台代码重用 ——源文件重用

微软在2002年推出了第一个版本的 .NET Framework,这是一个主要面向Windows 桌面(Windows Forms)和服务器(ASP.NET W...

2136
来自专栏张善友的专栏

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

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

Android学期项目指导

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

Windows 10 IoT Serials 8 – 如何改变UWP应用的目标平台

    Windows Insider计划直接加速了Windows系统的迭代,缩短了系统发布的周期。就Windows 10 IoT Core而言,迭代的速度和W...

1917
来自专栏张善友的专栏

认识ASP.NET 5项目结构和项目文件xproj

ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样...

2568

扫码关注云+社区

领取腾讯云代金券