A jquery plug-in every day-verify the input box
Verify input box
I don’t know how to describe it, but it’s a very common effect. When you enter the verification code, what you enter is one word by word, isn’t it? How are multiple input boxes related? This is what I want effect
The effect is as follows
Code part
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不知道命名</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
.item{
width: 50px;
height: 50px;
text-align: center;
font-size: 25px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
<input type="text" class="item" />
</body>
</html>
<script>
$(function(){
//给所有输入框加入序号
var items = $(".item");
for(var i = 0;i<items.length;i++){
var $item = $(items[i]);
$item.attr("data-index",i);
}
//当输入框输入一个字符之后自动跳转到下一个
$(".item").bind('input propertychange',function(){
var index = parseInt($(this).attr("data-index"));
var str = $(this).val();
$(this).val(str.substr(0,1))
//假如是不断输入就一直往下走
if(str.length>=1){
index++;
$(".item[data-index='"+index+"']").focus();
}else{
index--;
$(".item[data-index='"+index+"']").focus();
}
//假如是不断清除就一直往上走
})
})
</script>
Realization ideas
- The basic effect is to limit a box to one word, then continue to jump into the next input box to input, and clear it all the way back to empty
- We can monitor the content received by an input box. The existing keydown and the like cannot be monitored in real time. Even if it is combined with keypress, it is a bit troublesome, so I directly found an input propertychange event, which is to the effect that the monitoring of the character length change triggers. Unlike keydown, the effect of indirect monitoring of the input box is achieved by focusing on the input box to monitor keyboard strokes. In fact, the same event can also be simulated by using keyprocess and keydown, but the details are not mentioned.
- Then, about how to move the cursor before and after, first give all input boxes a serial number. After knowing the serial number, you can move the cursor to the correct position by focusing according to the above rules.
- Expansion, how to make the effect of the text in the text flashing, in fact, this is easy to understand, that is, the text in the text changes from visible to invisible, right? We use CSS to make an animation frame, the purpose is to make the text in the input box The color cycle of the font color cycle from the conspicuous color to the same color as the input background color is not realized-a crumb that was not made because it was too simple
- Finished, broken sleep