javascript - validacion - ¿Cómo enviar un formulario cuando se presiona la tecla de retorno?

validar formulario javascript onclick

Question

¿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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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!

Answer 5

Desde la display: none botones y las entradas no funcionarán en Safari e IE, encontré que la manera más fácil, que no requiere javascript extra , es simplemente agregar un <button /> absolutamente posicionado 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 principales navegadores a partir de septiembre de 2016.

Obviamente, es recomendable (y más semánticamente correcto) ajustar el <button/> como se desee.

Answer 6

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

Por lo tanto, el "enfoque automático" marca 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 hay 2 condiciones que se deben cumplir para que esto funcione sin JS:

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

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

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

Answer 7

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 un formulario estándar y utiliza una mejora progresiva para ocultar el envío y crear el nuevo div. Utilicé el estilo CSS de StriplingWarrior .

Answer 8

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).

Answer 9

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 al evitar display: none , parece funcionar correctamente en todos los navegadores.

Actualizar

Edité el código anterior para incluir un tabindex negativo, 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.

Answer 10

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

Answer 11

Similar al ejemplo de Chris Marasti-Georg, en lugar de usar javascript en línea. Básicamente, agregue onkeypress a los campos con los que desea que la tecla Intro funcione. Este ejemplo actúa en el campo de 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>

Answer 12

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>

Answer 13

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, simplemente agrego una entrada invisible de tipo imagen (donde " spacer.gif " es un gif transparente 1x1).

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

Este es el truco!

Answer 14

Use la etiqueta <button> . 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> , que no requiere javascript , que también puede enviar un formulario. Se puede diseñar de forma muy parecida a una etiqueta <div> (incluido <img /> dentro de la etiqueta del botón). Los botones de la etiqueta <input /> no son tan flexibles.

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

Hay tres tipos para configurar en el <button> ; se asignan a los tipos de botón <input> .

<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

• W3C wiki sobre <button>
• HTML5 <button>
• HTML4 <button>

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