专栏首页练小习的专栏模拟微信支付宝密码输入框的效果

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

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

相关文章

  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习
  • 个人信息页面网页

    王凡汎
  • SpringBoot-10-之初阶整合篇(下)

    张风捷特烈
  • SpringBoot技术栈搭建个人博客【前台开发/项目总结】

    先吐槽一句..写页面是真的不擅长,然后限于时间的问题,我开始考虑换用Bootstrap来完成页面的编写,因为时间有限(我得在实习完之前把所有页面开发完),学习V...

    我没有三颗心脏
  • html --- rem 媒体查询

    手机屏幕的分辨率越来越高,比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图,其参考分辨率为1440*...

    小蔚
  • WordPress文章添加彩色美化框及彩色按钮

    有时候,wordpress的文章编辑器并不能满足我们的要求,那就要靠我们自己动手实现了。

    AlexTao
  • input file上传文件改变默认样式

    我们知道,在使用到input file上传文件的时候,会出现这样很丑的默认样式,作为前端开发的我们,主要责任就是去优化这些样式,以更美观的方式呈现出来,但是,...

    祈澈菇凉
  • 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

    Jackson0714

扫码关注云+社区

领取腾讯云代金券