Usar Javascript para cambiar qué envío está activado al introducir la tecla, presione

Tengo un formulario en una página HTML con varios botones de envío que realizan diferentes acciones. Sin embargo, cuando el usuario escribe un valor en una entrada de texto y pulsa ingresar, los navegadores generalmente actúan como si el siguiente botón de envío se activase secuencialmente. Quiero una acción particular que se produzca, por lo que una solución que encontré fue poner en invisibles botones de envío en el código HTML directamente después de las entradas de texto en cuestión, así:Usar Javascript para cambiar qué envío está activado al introducir la tecla, presione

<input type="text" name="something" value="blah"/> 
<input type=submit name="desired" value="Save Earth" style="display: none"/> 
... 
<input type=submit name="something_else" value="Destroy Earth" /> 
... 
<input id="foobar" type=submit name="desired" value="Save Earth" />

Esto funciona como un encanto en la mayoría de los navegadores, excepto que no lo hace en navegadores web como Safari y Chrome. Por alguna razón, omiten el botón de envío invisible. He estado tratando de descubrir cómo interceptar la tecla Enter presionar y activar el envío correcto usando Javascript, pero no he podido hacer que funcione. Interceptar la clave y establecer el foco en el envío correcto no funciona.

¿Hay alguna forma de usar Javascript o de otro modo para seleccionar qué botón de envío se usará cuando el usuario presione la tecla Intro en una entrada de texto en un formulario HTML?

Editar: Para aclarar, el formulario no puede requerir Javascript para "funcionar" fundamentalmente. No me importa si el envío de la clave de entrada no es deseable sin Javascript en los navegadores webkit, pero no puedo eliminar ni cambiar el orden de los botones de envío.

~~Esto es lo que probé, no cambia el comportamiento de envío en los navegadores webkit.~~
Lo que funcionó es cambiar el foco () en el siguiente código a clic().

document.onkeypress = processKey; 

function processKey(e) 
{ 
    if (null == e) 
     e = window.event ; 
    if (e.keyCode == 13) { 
     document.getElementById("foobar").click(); // previously: focus() 
    } 
}

EDIT: Solución final:

Funciona con todos los navegadores y sólo se intercepta la tecla enter cuando sea necesario:

HTML:

<input type="text" name="something" value="blah" 
    onkeydown="return processKey(event)" /> 
<input type=submit name="desired" value="Save Earth" style="display: none"/> 
... 
<input type=submit name="something_else" value="Destroy Earth" /> 
... 
<input id="foobar" type=submit name="desired" value="Save Earth" />

Javascript:

function processKey(e) 
{ 
    if (null == e) 
     e = window.event ; 
    if (e.keyCode == 13) { 
     document.getElementById("foobar").click(); 
     return false; 
    } 
}

Fuente

2008-12-19 postfuturist

prueba mi ejemplo a continuación. use e.which en lugar de e.keycode – Tester101

Una forma sería eliminar todos los botones de envío y usar los botones de ingreso para enviar el formulario de forma programática. Esto eliminaría la posibilidad de enviar el formulario al presionar la tecla Intro en un cuadro de texto. También puede dejar un botón de envío como la funcionalidad de envío predeterminado, y usar entradas de botones regulares para los demás y enviar el formulario de forma programática.

La caída obvia de esto es que los usuarios requieren que JavaScript esté habilitado. Si esto no es un problema, esto es una consideración para usted.

EDIT:

Aquí, he tratado de hacer un ejemplo para usted usando jQuery (la misma funcionalidad puede ser fácilmente creados sin jQuery) ... que me haga saber si esto ayuda ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"><!-- 
    $(document).ready(function(){ 
     $("#f input").filter(":text").keydown(function(event) { 
      if (event.keyCode==13) { 
       $(this).nextAll().eq(0).click(); 
      } 
     }); 
    }); 
    //--></script> 
</head> 
<body> 
    <form name="f" id="f"> 
     <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br /> 
     <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br /> 
     <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br /> 
    </form> 
</body> 
</html>

Fuente

2008-12-19 20:56:47 cLFlaVA

@ steveth45 vea mi ejemplo ... los botones de entrada podrían cambiarse fácilmente para enviar botones. – cLFlaVA

Aha! El clic() es la respuesta! – postfuturist

@ steveth45: para completar, asegúrese de manejar el evento en todos los navegadores (más comunes). algunos tratan el evento de manera diferente. http://www.quirksmode.org/dom/events/index.html – cLFlaVA

Simplemente controle el evento de pulsación de tecla.poner onKeyPress en el cuerpo de la etiqueta


onkeypress=CheckKeyPress()

Entonces manejar la tecla Intro


function CheckKeyPress(){ 
    var code; 
    if(!e) var e = window.event; 
    if(e.keyCode){ 
     code = e.keyCode; 
    }else if(e.which){ 
     code = e.which; 
    } 
    if(code == 13){ 
     //Do Something 
    } 
}

Fuente

2008-12-19 21:19:45 Tester101

Olvidó poner "e" en el encabezado de la función ... – some

este código solo hace algo si pone código en el área que dice // hacer algo, y presiona la tecla enter – Tester101

No interceptar el evento keydown, interceptar el evento submit.

manera:

form.onsubmit = function(e){ 
    // Do stuff. Change the form's action or method maybe. 
    return true; 
}

Fuente

2008-12-19 21:25:43 Triptych

Hmm, el truco aquí sería debe detectar desde el interior de esta función si el usuario la ha llegado aquí pulsando enter en una entrada de texto o haciendo clic en el botón de envío real. ¿Es posible? – postfuturist

@ steveth45: Hasta donde yo sé, no. Cuando se invoca onsubmit, este/e.target/e.srcElement apunta al elemento de formulario, no al botón. – some

¿Qué pasa con el uso de formas separadas? Tal vez me falta algo que hace esto imposible: P

Fuente

2008-12-19 21:49:09 finpingvin

Sí, los diversos botones de envío aún necesitan los valores publicados de cada una de las diversas entradas en el formulario, por lo que la división del formulario no funciona. – postfuturist

Y no puede realizar diferentes acciones en el lado del servidor, dependiendo de los campos donde se completó? – finpingvin

Podría, pero eso no tendría ningún sentido con mi página y no tiene ninguna relación con este problema. – postfuturist

La acción de envío predeterminado invisible es un enfoque razonable y no arrastra JavaScript en la ecuación. Sin embargo, los elementos de formulario con 'display: none' no son generalmente confiables. Tiendo a usar un botón de envío completamente posicionado antes que los demás en la página, ubicado en el lado izquierdo de la página. Todavía es bastante feo, pero hace el trabajo.

Fuente

2008-12-20 14:21:36 bobince

Esta es una buena idea, no encajó, pero recibe un voto positivo. – postfuturist

¿Qué le parece usar CSS? Simplemente puede configurar el primer botón, su botón predeterminado fuera del área visible de la pantalla con una "posición: absoluta; izquierda: -200px; superior: -200px;". Por lo que recuerdo, no será ignorado por ningún navegador, porque no es invisible. Esto funciona muy bien:

<form method="get"> 
<input type="text" name="something" value="blah"/> 
<input type=submit name="desired" value="Save Earth" 
     style="position: absolute; left: -200px; top: -200px;"/> 
... 
<input type=submit name="something_else" value="Destroy Earth" /> 
... 
<input id="foobar" type=submit name="desired" value="Save Earth" /> 
</form>

Y la tierra se salva ...

Fuente

2010-01-01 12:42:04 coretys

'Y la tierra se salva ...' ¡LOL! – Nirmal

Usar Javascript para cambiar qué envío está activado al introducir la tecla, presione

Respuesta

Cuestiones relacionadas