Pregunta ¿Cómo enviar un formulario cuando se presiona la tecla de retorno?


¿Puede alguien decirme cómo enviar un formulario HTML cuando se presiona la tecla de retorno y si no hay botones en el formulario? El botón de enviar no está allí. Estoy usando un div personalizado en lugar de eso.


74
2017-08-27 11:56


origen


Respuestas:


OMI, esta es la respuesta más limpia:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

Mejor aún, si está utilizando javascript para enviar el formulario utilizando el div personalizado, también debe usar javascript para crearlo, y para configurar la pantalla: sin estilo en el botón. De esta forma, los usuarios con javascript desactivado seguirán viendo el botón de enviar y pueden hacer clic en él.


Se ha observado que display: none hará que IE ignore la entrada. Creé un nuevo ejemplo de JSFiddle que comienza como una forma estándar, y utiliza una mejora progresiva para ocultar el envío y crear el nuevo div. Utilicé el estilo de CSS de StriplingWarrior.


52
2017-08-27 12:38



Para enviar el formulario cuando se presiona la tecla Entrar, cree una función de JavaScript en esta línea.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

A continuación, agregue el evento al alcance que necesite, por ejemplo, en la etiqueta div:

<div onKeyPress="return checkSubmit(event)"/>

Este también es el comportamiento predeterminado de Internet Explorer 7 de todas formas (probablemente también versiones anteriores).


75
2017-08-27 12:18



Probé varias estrategias basadas en JavaScript / jQuery, pero seguí teniendo problemas. El último problema que surgió fue el envío accidental cuando el usuario usa la tecla Intro para seleccionar de la lista de autocompletado incorporada del navegador. Finalmente cambié a esta estrategia, que parece funcionar en todos los navegadores que admite mi empresa:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>
.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Esto es similar a la respuesta actualmente aceptada por Chris Marasti-Georg, pero evitando display: none, parece funcionar correctamente en todos los navegadores.

Actualizar

Edité el código de arriba para incluir un negativo tabindex por lo que no captura la tecla de tabulación. Si bien esto técnicamente no se validará en HTML 4, la especificación HTML5 incluye un lenguaje para que funcione de la misma manera en que la mayoría de los navegadores ya lo estaban implementando de todos modos.


51
2017-07-06 20:50



Utilizar el <button> etiqueta. Del estándar W3C:

Los botones creados con el elemento BUTTON funcionan igual que los botones creados con el elemento INPUT, pero ofrecen posibilidades de representación más completas: el elemento BUTTON puede tener contenido. Por ejemplo, un elemento BUTTON que contiene una imagen funciona como y se puede parecer a un elemento INPUT cuyo tipo está configurado en "imagen", pero el tipo de elemento BUTTON permite contenido.

Básicamente hay otra etiqueta, <button>, cual no requiere javascript, que también puede enviar un formulario. Se puede diseñar de forma muy similar a una <div> etiqueta (incluyendo <img /> dentro de la etiqueta del botón). Los botones de <input /> la etiqueta no es tan flexible

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Hay tres tipos para establecer en el <button>; ellos asignan a la <input> tipos de botones.

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Estándares

yo suelo <button> etiquetas con  y un poco de  estilo para obtener botones de formas coloridas y funcionales. Tenga en cuenta que es posible escribir css para, por ejemplo, <a class="button">los enlaces comparten el estilo con el <button> elemento.


12
2017-11-17 08:21



Creo que esto es lo que quieres.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

Cada vez que se presione una tecla, se invocará la función enter (). Si la tecla presionada coincide con la tecla Intro (13), se llamará a sendform () y se enviará el primer formulario encontrado. Esto es solo para Firefox y otros navegadores compatibles con las normas.

Si encuentras este código útil, ¡por favor asegúrate de votarme!


7
2017-12-13 14:56



Así es como lo hago con jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Otro javascript no sería muy diferente. la captura está buscando el argumento de pulsación de tecla de "13", que es la tecla enter


6
2017-08-27 12:07



Use la siguiente secuencia de comandos.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

Para cada campo que debe enviar el formulario cuando el usuario pulsa enter, llame a la función submitenter de la siguiente manera.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

6
2017-08-27 12:14