¿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á ahí . Estoy usando un div personalizado en lugar de eso.

En mi opinión, 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á usando javascript para enviar el formulario usando el div personalizado, también debe usar javascript para crearlo y configurar el estilo display: none en el botón. De esta forma, los usuarios con JavaScript desactivado seguirán viendo el botón de envío y podrán 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 un formulario estándar y usa una mejora progresiva para ocultar el envío y crear el nuevo div. Usé el estilo CSS de StriplingWarrior .

Para enviar el formulario cuando se presiona la tecla Intro, cree una función de javascript a lo largo de estas líneas.

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

Luego agregue el evento a cualquier alcance que necesite, por ejemplo, en la etiqueta div:

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

Sin embargo, este también es el comportamiento predeterminado de Internet Explorer 7 (probablemente también versiones anteriores).

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 autocompletar incorporada del navegador. Finalmente cambié a esta estrategia, que parece funcionar en todos los navegadores compatibles con 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 al evitarlo display: none, parece funcionar correctamente en todos los navegadores.

Actualizar

Edité el código anterior para incluir un negativo tabindexpara que no capture la tecla de tabulación. Si bien esto técnicamente no se valida en HTML 4, la especificación HTML5 incluye lenguaje para que funcione de la forma en que la mayoría de los navegadores ya lo estaban implementando de todos modos.

Usa la <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 ricas: el elemento BUTTON puede tener contenido. Por ejemplo, un elemento BUTTON que contiene una imagen funciona como y puede parecerse a un elemento INPUT cuyo tipo se establece en "imagen", pero el tipo de elemento BUTTON permite contenido.

Básicamente, existe otra etiqueta, <button>que no requiere javascript , que también puede enviar un formulario. Puede tener un estilo similar al de una <div>etiqueta (incluso <img />dentro de la etiqueta del botón). Los botones de la <input />etiqueta no son tan flexibles.

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

Hay tres tipos para configurar <button>; se asignan a los <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>

Normas

• Wiki del W3C sobre <button>
• HTML5 <button>
• HTML4 <button>

Yo uso <button>etiquetas concss-sprites y un poco de cssestilo para obtener botones de forma coloridos y funcionales. Tenga en cuenta que es posible escribir css para, por ejemplo, <a class="button">enlaces compartidos al estilo con el <button>elemento.

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 presiona una tecla, se llamará a la función enter (). Si la tecla presionada coincide con la tecla enter (13), se llamará a sendform () y se enviará el primer formulario encontrado. Esto es solo para Firefox y otros navegadores que cumplen con los estándares.

Si encuentra útil este código, ¡asegúrese de votarme!

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. el problema es comprobar el argumento de pulsación de tecla "13", que es la tecla Intro

Utilice 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 presione enter, llame a la función de 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>

Yo uso este método:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

Básicamente, solo agrego una entrada invisible de tipo imagen (donde " spacer.gif " es un gif transparente de 1x1).

De esta manera, puedo enviar este formulario con el botón 'enviar' o simplemente presionando enter en el teclado.

¡Este es el truco!

¿Por qué no aplica los estilos de envío div a un botón de envío? Estoy seguro de que hay un javascript para esto, pero sería más fácil.

Si está utilizando asp.net, puede utilizar el atributo defaultButton en el formulario.

Creo que debería tener un botón de envío o una imagen de envío ... ¿Tiene una razón específica para usar un "div de envío"? Si solo quieres estilos personalizados, te lo recomiendo <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Ampliando las respuestas, esto es lo que funcionó para mí, tal vez alguien lo encuentre útil.

HTML

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Similar al ejemplo de Chris Marasti-Georg, en lugar de usar javascript en línea. Básicamente, agregue una pulsación de tecla a los campos con los que desea que funcione la tecla Intro. Este ejemplo actúa sobre el campo de la contraseña.

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Dado que los display: nonebotones y las entradas no funcionan en Safari e IE, descubrí que la forma más fácil, que no requiere hacks de javascript adicionales , es simplemente agregar una posición absoluta <button />al formulario y colocarlo lejos de la pantalla.

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

Esto funciona en la versión actual de todos los navegadores principales a partir de septiembre de 2016.

Obviamente, se recomienda (y es más semánticamente correcto) aplicar el estilo <button/>deseado.

El uso del atributo "autofocus" funciona para dar foco de entrada al botón de forma predeterminada. De hecho, al hacer clic en cualquier control dentro del formulario, también se enfoca el formulario, un requisito para que el formulario reaccione al RETORNO. Por lo tanto, el "enfoque automático" lo hace por usted en caso de que el usuario nunca haya hecho clic en ningún otro control dentro del formulario.

Por lo tanto, el "enfoque automático" hace la diferencia crucial si el usuario nunca hizo clic en ninguno de los controles de formulario antes de presionar RETORNO.

Pero incluso entonces, todavía se deben cumplir 2 condiciones para que esto funcione sin JS:

a) tienes que especificar una página a la que ir (si se deja vacía, no funcionará). En mi ejemplo es hello.php

b) el control debe ser visible. Posiblemente podría moverlo fuera de la página para ocultarlo, pero no puede usar display: none o visible: hidden. Lo que hice fue usar el estilo en línea para moverlo fuera de la página a la izquierda 200px. Hice la altura de 0px para que no ocupe espacio. Porque de lo contrario, aún puede interrumpir otros controles por encima y por debajo. O también podrías hacer flotar el elemento.

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>