验证码输入弹窗

最新推荐文章于 2024-09-10 00:17:08 发布
原创最新推荐文章于 2024-09-10 00:17:08 发布 · 267 阅读
CC 4.0 BY-SA版权
文章标签：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .captcha-pop {
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.70);
    }

    .captcha-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      min-height: 330px;
      background: #ffffff;
      border-radius: 10px 10px 0 0;
      padding: 16px;
      box-sizing: border-box;
    }

    .captcha-header {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      position: relative;
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-500;
      font-weight: 500;
      color: #333333;
    }

    .captcha-header-close {
      position: absolute;
      top: 0;
      right: 0;
      width: 23px;
      height: 23px;
    }

    .captcha-img {
      width: 100%;
      height: 100%;
    }

    .captcha-pic {
      width: 100%;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 8px;
    }


    .captcha-pic-img {
      width: 90px;
      height: 40px;
    }

    .captcha-pic-reload {
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-400;
      font-weight: 400;
      text-align: right;
      color: #18A4EA;
      margin-left: 10px;
    }

    .captcha-content {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      gap: 5px;
      padding: 10px 20px;
      box-sizing: border-box;
      /* 你可以根据需要调整格子之间的间距 */
    }

    .captcha-digit {
      width: 40px;
      /* 你可以根据需要调整输入框的宽度 */
      height: 40px;
      padding: 5px;
      text-align: center;
      background: #edf2f5;
      border-radius: 8px;
      border: 1px #edf2f5 solid;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-400;
    }

    .captcha-tip {
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 25px 0 10px;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-400;
      font-weight: 400;
      color: #f0342f;
    }

    .captcha-tip-warning {
      display: none;
    }

    .captcha-tip-reload {
      flex: 1;
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-400;
      font-weight: 400;
      text-align: right;
      color: #18A4EA;
    }

    .captcha-btn {
      width: 300px;
      height: 44px;
      background: #abc6d4;
      border-radius: 4px;
      margin: 0 auto;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-500;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="captcha-pop" id="captcha-pop">
    <div class="captcha-wrapper">
      <div class="captcha-header">
        <div class="captcha-header-title">
          请输入下方图像验证码
        </div>
        <div class="captcha-header-close" id="captcha-close">
          <img src="https://app.fmcc.com.cn/group1/M00/04/48/CizIPWY-2eWAEvOPAAACIOdETlg984.png" alt="" srcset=""
            class="captcha-img">
        </div>
      </div>
      <div class="captcha-pic">
        <div class="captcha-pic-img">
          <img src="https://app.fmcc.com.cn/group1/M00/04/48/CizIPWY_FZKALQxYAAAlS22O-L4757.png" alt="" srcset=""
            class="captcha-img">
        </div>
        <div class="captcha-pic-reload">
          看不清？
        </div>
      </div>
      <div class="captcha-content" id="captcha-content">
        <input type="text" class="captcha-digit" maxlength="1" />
        <input type="text" class="captcha-digit" maxlength="1" />
        <input type="text" class="captcha-digit" maxlength="1" />
        <input type="text" class="captcha-digit" maxlength="1" />
      </div>
      <div class="captcha-tip">
        <div class="captcha-tip-warning" id="captcha-warning">
          *请输入正确的验证码
        </div>
      </div>
      <div class="captcha-btn" id="captcha-btn">
        确定
      </div>
    </div>
  </div>
</body>

<script>
  document.getElementById('captcha-content').addEventListener('click', function () {
    if (document.querySelectorAll('.captcha-digit')[0].value == '') {
      document.querySelectorAll('.captcha-digit')[0].focus();
    } else if (document.querySelectorAll('.captcha-digit')[1].value == '') {
      document.querySelectorAll('.captcha-digit')[1].focus();
    } else if (document.querySelectorAll('.captcha-digit')[2].value == '') {
      document.querySelectorAll('.captcha-digit')[2].focus();
    } else if (document.querySelectorAll('.captcha-digit')[3].value == '') {
      document.querySelectorAll('.captcha-digit')[3].focus();
    } else {
      document.querySelectorAll('.captcha-digit')[3].focus();
    }
  })
  document.querySelectorAll('.captcha-digit').forEach((input, index) => {
    input.addEventListener('input', function () {
      if (index == 3 && document.querySelectorAll('.captcha-digit')[3].value != '') {
        document.getElementById('captcha-btn').style.background = '#16a3ea';
      } else {
        document.getElementById('captcha-btn').style.background = '#abc6d4';
        document.getElementById('captcha-warning').style.display = 'none';
      }
      if (document.querySelectorAll('.captcha-digit')[0].value == '' & index > 0) {
        document.querySelectorAll('.captcha-digit')[0].focus();
        document.querySelectorAll('.captcha-digit')[0].value = this.value;
        document.querySelectorAll('.captcha-digit')[1].value = '';
        document.querySelectorAll('.captcha-digit')[2].value = '';
        document.querySelectorAll('.captcha-digit')[3].value = '';
        document.querySelectorAll('.captcha-digit')[1].focus();
        return;
      }
      if (document.querySelectorAll('.captcha-digit')[1].value == '' & index > 1) {
        document.querySelectorAll('.captcha-digit')[1].focus();
        document.querySelectorAll('.captcha-digit')[1].value = this.value;
        document.querySelectorAll('.captcha-digit')[2].value = '';
        document.querySelectorAll('.captcha-digit')[3].value = '';
        document.querySelectorAll('.captcha-digit')[2].focus();
        return;
      }
      if (document.querySelectorAll('.captcha-digit')[2].value == '' & index > 2) {
        document.querySelectorAll('.captcha-digit')[2].focus();
        document.querySelectorAll('.captcha-digit')[2].value = this.value;
        document.querySelectorAll('.captcha-digit')[3].value = '';
        document.querySelectorAll('.captcha-digit')[1].focus();
        return;
      }
      if (this.value.length === 1 && index < 3) {
        // 如果当前输入框已满且不是最后一个，则跳到下一个输入框  
        document.querySelectorAll('.captcha-digit')[index + 1].focus();
      }

    });

  });
  document.querySelectorAll('.captcha-digit').forEach((input, index) => {
    input.addEventListener('keydown', function (event) {
      // 检查是否按下了删除键（Backspace 或 Delete）  
      if (event.key === 'Backspace' || event.key === 'Delete') {
        // 按下了删除键，执行你的逻辑  
        if (document.querySelectorAll('.captcha-digit')[0].value == '') {
          document.querySelectorAll('.captcha-digit')[0].focus();
        } else if (document.querySelectorAll('.captcha-digit')[0].value != '' && document.querySelectorAll('.captcha-digit')[1].value == '') {
          document.querySelectorAll('.captcha-digit')[0].value = '';
          document.querySelectorAll('.captcha-digit')[0].focus();
        } else if (document.querySelectorAll('.captcha-digit')[1].value != '' && document.querySelectorAll('.captcha-digit')[2].value == '') {
          document.querySelectorAll('.captcha-digit')[1].value = '';
          document.querySelectorAll('.captcha-digit')[1].focus();
          return
        } else if (document.querySelectorAll('.captcha-digit')[2].value != '' && document.querySelectorAll('.captcha-digit')[3].value == '') {
          document.querySelectorAll('.captcha-digit')[2].value = '';
          document.querySelectorAll('.captcha-digit')[2].focus();
          return
        }
      }
    });

    // 你可以在这里添加更多的验证逻辑  
  });

  document.getElementById('captcha-btn').addEventListener('click', function () {
    let inputValue = '';
    document.querySelectorAll('.captcha-digit').forEach(input => {
      inputValue = inputValue + input.value;
    })
    if (inputValue.length < 4) {
      return;
    }
    console.log(inputValue, inputValue.toLocaleLowerCase(), '====123')
    if (inputValue.toLocaleLowerCase() != '5ru6') {
      document.getElementById('captcha-warning').style.display = 'block';
      return;
    }
    if (inputValue.toLocaleLowerCase() == '5ru6') {
     console.log('验证码校验成功！进入下一步。');
    }
  })

  document.getElementById('captcha-close').addEventListener('click', function () {
    document.getElementById('captcha-pop').style.display = 'none';
  })
</script>