Aprendi HTML e CSS há algum tempo, fiquei interessado nessa área e comecei a aprender programação avançada em JavaScript (terceira edição). Atualmente, tenho aprendido e acabei de aprender o conteúdo dos eventos e formar scripts. Alguns dias atrás, o professor me pediu para escrever um pedaço de código: em um formulário JavaScript, use a tecla Enter e as teclas de movimento para cima e para baixo à esquerda e à direita para mover o foco de uma caixa de texto para a caixa de texto anterior ou a próxima. Tentei escrever código usando o conhecimento que aprendi até agora. Encontrei várias dificuldades ao escrever: cálculo do módulo; Use isso e argumentos para encontrar o evento de gatilho dentro da função; Use o método addHandler () para adicionar manipuladores de eventos ao evento. Com a ajuda do professor, resolvi os problemas acima. Eu senti que havia aprendido muito conhecimento através deste código, então escrevi um comentário depois de resolvê -lo e publicá -lo.
A cópia do código é a seguinte:
<html>
<head lang = "en">
<meta charset = "utf-8">
<Title> </title>
</head>
<Body>
<morm>
<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 = "submit"> </div>
</morm>
<Cript>
função is_down (e) {
var isdown;
e = e || Window.Event;
Switch (e.KeyCode) {
Caso 13: // Digite a tecla
caso 39: // mova a chave para a direita
Caso 40: // Mova a tecla
isdown = true;
quebrar;
caso 37: // mova a chave para a esquerda
Caso 38: // mova a tecla
isdown = false;
quebrar;
}
retornar isdown;
}
função key_up () {
// Ao chamar a função, a própria função gerará isso e argumentos
// Use isso e argumentos para encontrar o campo e acionar eventos, respectivamente
var e = argumentos [1];
retornar is_down (e) === indefinido? true: handle_element (this, is_down (e));
}
função handle_element (campo, is_down) {
var elements = field.form.lements;
for (var i = 0, len = elementos.Length-1; i <len; i ++) {
if (campo == elementos [i]) {
quebrar;
}
}
i = is_down? (i + 1) % len: (i - 1) % len;
// (0 === i && is_down) -> Pressione a tecla Down após a última caixa de texto obter foco
// (-1 === i &&! Is_down)-> Pressione a tecla UP após a primeira caixa de texto ser focada
if ((0 === i && is_down) || (-1 === i &&! is_down)) {
retornar true;
}
elementos [i] .focus ();
var element_arr = ['botão', 'enviar', 'reset', 'select-one', 'textarea'];
if (element_arr.join (','). Indexof (elementos [i] .Type)> -1)
elementos [i] .select ();
retornar falso;
}
// Cancelar Digite o evento de formulário de envio padrão
document.onkeydown = function (e) {
e = e || Window.Event;
if (e.KeyCode == 13) {
E.PreventDefault? e.PreventDefault (): (eCurnValue = false);
}
};
// Reconhece AddEventListener e AnextEvent (ou seja) nos navegadores
função addHandler (elemento, tipo, manipulador) {
if (element.addeventListener)
element.AddeventListener (tipo, manipulador, false);
senão se (element.attachevent)
element.attachevent ("on" + tipo, manipulador);
outro
elemento ["on" + type] = manipulador;
}
var elements = document.forms [0] .Elements;
for (var i = 0, len = elements.length; i <len; i ++) {
// Adicionar manipulador de eventos key_up para o evento KeyUp
addHandler (elementos [i], "keyup", key_up);
}
</script>
</body>
</html>
O exposto acima é todo o conteúdo do código. Pessoalmente, sinto que a escrita é bastante abrangente e todas as coisas que devem ser levadas em consideração foram processadas. Espero que todos gostem.