Un complemento de jquery todos los días: verifique el cuadro de entrada
Verificar cuadro de entrada
No sé cómo describirlo, pero es un efecto muy común. Cuando ingresa el código de verificación, lo que ingresa es una palabra por palabra, ¿no? ¿Cómo se relacionan varios cuadros de entrada? Esto es lo que quiero efecto
El efecto es el siguiente
Parte de código
<!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>
Ideas de realización
- El efecto básico es limitar un cuadro a una palabra, luego continuar saltando al siguiente cuadro de entrada para ingresar y borrarlo hasta que quede vacío.
- Podemos monitorear el contenido recibido por un cuadro de entrada. El keydown existente y similares no se pueden monitorear en tiempo real. Incluso si se combina con la pulsación de tecla, es un poco problemático, así que encontré directamente un evento de cambio de propiedad de entrada, que es para el efecto que desencadena la supervisión del cambio de longitud de los caracteres. A diferencia de la pulsación de teclas, el efecto de la supervisión indirecta del cuadro de entrada se logra centrándose en el cuadro de entrada para controlar las pulsaciones del teclado. De hecho, el mismo evento también se puede simular mediante el proceso de teclado y keydown, pero no se mencionan los detalles.
- Luego, sobre cómo mover el cursor antes y después, primero asigne un número de serie a todos los cuadros de entrada. Después de conocer el número de serie, puede mover el cursor a la posición correcta enfocando de acuerdo con las reglas anteriores.
- Expansión, cómo hacer que el efecto del texto en el texto parpadee, de hecho, esto es fácil de entender, es decir, el texto en el texto cambia de visible a invisible, ¿verdad? Usamos CSS para hacer un marco de animación, el el propósito es hacer el texto en el cuadro de entrada El ciclo de color del ciclo de color de la fuente del color llamativo al mismo color que el color de fondo de entrada no se realiza, una migaja que no se hizo porque era demasiado simple
- Sueño terminado, roto