1. 首页
  2. web前端

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

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

原创文章,作者:aike

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=1726

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code