evento desencadenante teclado en un formulario con un campo

que estoy viendo el código de mi amigo aquí ...evento desencadenante teclado en un formulario con un campo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> Check action </TITLE> 

<script> 

    function detectEvent(){ 
    if(window.event.keyCode==13) 
     { 
      alert("you hit return!"); 
     } 

    } 
</script> 


</HEAD> 

<BODY> 
    <form name="name1" onkeyup="detectEvent()" action="page2.html"> 
     <p> Field1 
      <input type="text" id="text1"/> 
     </p> 
    </form> 
</BODY> 
</HTML>

y cuando trató de introducir un valor en el cuadro de texto y presiona entrar, no llamar el detectorEvento(). He dicho, siempre llamará onSubmit el botón enter ..... y me sorprendió,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> Check action </TITLE> 

<script> 

    function detectEvent(){ 
    if(window.event.keyCode==13) 
     { 
      alert("you hit return!"); 
     } 

    } 
</script> 


</HEAD> 

<BODY> 
    <form name="name1" onkeyup="detectEvent()" action="page2.html"> 
     <p> Field1 
      <input type="text" id="text1"/> 
     </p> 
     <p> Field1 
      <input type="text" id="text2"/> 
     </p> 
    </form> 
</BODY> 
</HTML>

Ahora pulsa ENTER, la función se llama a ..... ¿Por qué tan !?

¿Por qué onKeyUp no se llama en formularios con solo un campo.! ¿Me estoy perdiendo de algo?

Fuente

2010-03-24 raj

El orden de los acontecimientos es:

keydown 
keypress 
submit 
keyup

Así que por el momento en que su manejador keyup habría sido llamado, el formulario ya ha comenzado la presentación. Si el action del formulario es page2.html en el sistema de archivos local, va a navegar muy rápido y probablemente se aleje de la página antes de llamar al keyup; configure el action en un sitio externo, por otro lado, y keyup tendrá tiempo para disparar.

Agregar el segundo campo de entrada es un problema diferente: en este caso, el formulario no se envía. Es una peculiaridad histórica curiosa que los navegadores envíen un formulario que solo tenga un botón de entrada y otro de envío, pero se nieguen a enviar un formulario con más de una entrada y ningún botón de envío. Esto se remonta a la especificación de HTML 2.0:

Cuando solo hay un campo de entrada de texto de una línea en un formulario, el agente de usuario debe aceptar Entrar en ese campo como una solicitud para enviar el formulario.

HTML 2.0 no especificó si es o no debe ser aceptado para enviar un formulario en cualquier otra circunstancia Intro (la intención sólo parece haber sido duplicar la funcionalidad de la antigua <isindex> elemento), pero los navegadores de la El día parece haber interpretado que eso significa que Enter-submission no debería ocurrir donde hay múltiples campos, pero luego cualquier botón de envío hace que Enter-submission pase de todos modos. IE y otros navegadores posteriores copiaron este extraño comportamiento.

Punto no relacionado: la dependencia de window.event hace que el código sea innecesariamente solo IE. Para todos los demás navegadores, el objeto de evento se pasa como un argumento a la función del controlador de eventos. Puede hacer onkeyup="detectEvent(event)" en el HTML y luego usar ese argumento en la función detectEvent, que funciona en ambos modelos porque se usa el argumento local event o el window.event global. Sin embargo, el enfoque habitual sería perder el atributo de controlador de eventos y asignar desde JavaScript:

<form action="page2.html" id="enterform"> 
    <p> Field1 
     <input type="text" id="text1"> 
     <!-- Note: *no* trailing slash - the doctype says HTML4, not XHTML --> 
    </p> 
</form> 

<script type="text/javascript"> 
    document.getElementById('enterform').onkeyup= function(event) { 
     if (event===undefined) event= window.event; // for IE 
     if (event.keyCode===13) 
      alert('You pressed Enter'); 
    }; 
</script>

Habiendo dicho todo esto ... En general estoy sospechoso de atrapar la tecla Intro. No estoy muy seguro de lo que está tratando de hacer, pero si es el caso común de cambiar el botón predeterminado de una forma, esta definitivamente no es la manera de hacerlo y causará una variedad de problemas. No hay una buena razón para atrapar la tecla Intro para llamar al .submit() en un formulario.

Fuente

2010-03-24 13:07:37 bobince

Estoy de acuerdo con su respuesta, por lo general solo debe tener un controlador de envío que devuelve falso si no se debe enviar el formulario. Sin embargo, escribo un montón de código ajax que no solo envía formularios y vuelve a encerrar la página. Así que, sin preocuparse por el diseño, Bobince lo corrigió, debe enumerarse para el evento de selección, ya que el evento clave se cancela cuando se dispara el evento de envío –

@bobince ¡Muchas gracias! eso explica el comportamiento ... * pero los navegadores del día parecen haber interpretado que eso significa que Enter-submission no debería ocurrir donde hay múltiples campos, pero luego cualquier botón de envío hace que Enter-submission pase de todos modos. IE y otros navegadores posteriores copiaron este comportamiento extraño. * No es el caso con Chrome., .. chrome envía el formulario en el botón enter.! – raj

¿Dónde podría obtener más información sobre la prioridad de los eventos html?? W3schools no parece hablar sobre las prioridades. – raj

Curiosamente, en Google Chrome, el formulario con el segundo campo de entrada seguirá siendo enviado, por lo que nunca captará la tecla Intro en un evento de teclado, independientemente de la cantidad de campos que tenga.

Solución = use la tecla o la tecla.

Fuente

2010-03-24 13:10:39

Estoy codificando para IE solamente. pero sí, mi amigo probó el comportamiento en Chrome ayer, no atrapó el evento clave. – raj

evento desencadenante teclado en un formulario con un campo

Respuesta

Cuestiones relacionadas