验证码的特殊样式

最新推荐文章于 2022-11-24 20:30:29 发布

原创最新推荐文章于 2022-11-24 20:30:29 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#验证码

本文介绍了一个使用HTML和JavaScript实现的自动填充表单功能。当用户在一个输入框中输入数字时，焦点会自动转移到下一个输入框，连续输入数字可以快速填写表单。此外，还实现了退格键回退到上一个输入框的功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
<style type="text/css">
input{
margin-top: 80px;
width: 20%;
margin-right: 3%;
border: none;
outline: none;
border-bottom: 1px solid #ccc;
text-align: center;
}
.box{
margin-right: 0;
}
</style>
</head>
<body>
<input type="tel" id="userinfo" index='0' maxlength="1"/>
<input type="tel" id="userinfo2" index='1' maxlength="1"/>
<input type="tel" id="userinfo3" index='2' maxlength="1"/>
<input type="tel" id="userinfo4" index='3' maxlength="1" class="box"/>
<button>按钮</button>
</body>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var higoodthingsdata = {
index: 0,
morebackspace: false
}
function nextinput(index) {
index++;
$('[index=' + index + ']').focus();
higoodthingsdata.index = index;
}
function preinput(index) {
index--;
$('[index=' + index + ']').focus();
$('[index=' + index + ']').val('');
higoodthingsdata.index = index;
}
$(this).keyup(function (even) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if(((keycode >= 49) && (keycode <= 57)) || ((keycode >= 96) && (keycode <= 105))){
nextinput(higoodthingsdata.index);
higoodthingsdata.morebackspace = false;
}else if(keycode == 8) {
if(higoodthingsdata.morebackspace) {
preinput(higoodthingsdata.index);
}else {
$('[index=' + higoodthingsdata.index + ']').val('');
higoodthingsdata.index --;
}
higoodthingsdata.morebackspace = true;
}else {
$('[index=' + higoodthingsdata.index + ']').val('');
}

})
$(this).on("click",function(){
if($("#userinfo").val()==""){
$("#userinfo").focus();
}
})
$("button").on("click",function(){
console.log($("#userinfo").val());
})

</script>

</html>