Aprendí HTML y CSS hace algún tiempo, me interesé en esta área y comencé a aprender programación avanzada en JavaScript (tercera edición). He estado aprendiendo en estos días y acabo de haber aprendido el contenido de eventos y secuencias de comandos. Hace unos días, el maestro me pidió que escribiera un código: en forma de JavaScript, use la tecla ENTER y las teclas de movimiento hacia arriba y hacia abajo a la izquierda y derecha para mover el foco de un cuadro de texto al cuadro de texto anterior o siguiente. Traté de escribir código usando el conocimiento que he aprendido hasta ahora. Encontré varias dificultades por escrito: cálculo del módulo; Use esto y argumentos para encontrar el evento de activación dentro de la función; Use el método addHandler () para agregar controladores de eventos al evento. Con la ayuda del maestro, resolví los problemas anteriores. Sentí que había aprendido mucho conocimiento a través de este código, así que escribí un comentario después de resolverlo y publicarlo.
La copia del código es la siguiente:
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> </title>
</ablo>
<Body>
<form>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "text"> </div>
<div> <input type = "enviar"> </div>
</form>
<script>
función is_down (e) {
var is down;
E = E || Window.event;
Switch (E.KeyCode) {
Caso 13: // Ingrese la tecla
caso 39: // Mueve la clave a la derecha
Caso 40: // Mueve la llave
isdown = true;
romper;
caso 37: // Mueve la llave a la izquierda
Caso 38: // Clave de mudanza
isdown = false;
romper;
}
regresar isdown;
}
función key_up () {
// Al llamar a la función, la función en sí generará esto y los argumentos
// Use esto y argumentos para encontrar el campo y activar eventos respectivamente
var e = argumentos [1];
return is_down (e) === indefinido? verdadero: handle_element (this, is_down (e));
}
función handle_element (campo, is_down) {
VAR Elements = Field.Form.Elements;
para (var i = 0, len = elements.length-1; i <len; i ++) {
if (field == Elements [i]) {
romper;
}
}
i = is_down? (i + 1) % len: (i - 1) % len;
// (0 === i && is_down) -> Presione la tecla de abajo después de que se gana el último cuadro de texto
// (-1 === I &&! IS_DOWN)-> Presione la tecla ARRIBA después de que se concentre el primer cuadro de texto
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
devolver verdadero;
}
elementos [i] .focus ();
var element_arr = ['botón', 'enviar', 'restablecer', 'select-one', 'textArea'];
if (element_arr.join (','). indexOf (elementos [i] .type)> -1)
elementos [i] .select ();
devolver falso;
}
// Cancelar Ingrese el evento de formulario de envío predeterminado
document.OnKeydown = function (e) {
E = E || Window.event;
if (e.keycode == 13) {
E.PreventDefault? E.PreventDefault (): (e.returnValue = false);
}
};
// Reconocer addEventListener y adjuntar Event (es decir) en los navegadores
función addHandler (elemento, type, manejador) {
if (element.addeventListener)
elemento.addeventListener (tipo, controlador, falso);
else if (element.attachevent)
element.attachevent ("on" + type, manejador);
demás
elemento ["on" + type] = Handler;
}
var Elements = document.forms [0] .Elements;
para (var i = 0, len = elements.length; i <len; i ++) {
// Handler de eventos Key_Up para el evento KeyUp
addHandler (elementos [i], "keyUp", key_up);
}
</script>
</body>
</html>
Lo anterior es todo el contenido del código. Personalmente, siento que la escritura es bastante completa, y todas las cosas que deben tenerse en cuenta se han procesado. Espero que a todos les guste.