<!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>
验证码输入弹窗
最新推荐文章于 2024-08-12 16:19:20 发布