presionada - Utilice Javascript para cambiar qué envío está activado al presionar la tecla Intro

tecla enter en html

Question

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 que ocurra una acción en particular, así que una solución que encontré fue poner botones de envío invisibles en el HTML directamente después de las entradas de texto en cuestión, como esta:

<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 se usa 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 manera 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ó fue cambiar el foco () en el siguiente código para hacer 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 cada navegador y solo intercepta la tecla Intro 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;
    }
}

Answer 1

¿Qué pasa con el uso de formularios separados? Tal vez me estoy perdiendo algo que hace que esto sea imposible: P

Answer 2

No intercepte el evento keydown , intercepte el evento submit .

asi que:

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

Answer 3

Simplemente controle el evento de presionar la tecla. poner en KeyPress en la etiqueta de cuerpo

onkeypress=CheckKeyPress()

Luego maneje la tecla enter

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
    }
}

Answer 4

Una forma sería eliminar todos los botones de envío y usar los botones de ingreso para enviar el formulario programáticamente. 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 obviedad de esto es que los usuarios requerirían que JavaScript esté habilitado. Si esto no es un problema, esto es una consideración para usted.

EDITAR:

Aquí, traté de hacer un ejemplo para ti usando jQuery (la misma funcionalidad se puede crear fácilmente sin jQuery) ... avísame 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>

Answer 5

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.

Answer 6

¿Qué hay de 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 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 ...