html - mensaje - Enviar un formulario presionando Enter sin un botón de envío

limpiar formulario html despues de enviar

Question

Bueno, estoy intentando enviar un formulario presionando Intro pero no mostrando un botón de envío. No quiero entrar en JavaScript si es posible, ya que quiero que todo funcione en todos los navegadores (la única forma en que JS sé con eventos)

En este momento la forma se ve así:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

Que funciona bastante bien. El botón de envío funciona cuando el usuario presiona Intro, y el botón no se muestra en Firefox, IE, Safari, Opera y Chrome. Sin embargo, todavía no me gusta la solución ya que es difícil saber si funcionará en todas las plataformas con todos los navegadores.

¿Alguien puede sugerir un método mejor? ¿O es esto tan bueno como se pone?

Answer 1

¿Has probado esto?

<input type="submit" style="visibility: hidden;" />

Dado que la mayoría de los navegadores comprenden la visibility:hidden y realmente no funciona como una display:none , supongo que debería estar bien, sin embargo. Realmente no lo he probado yo mismo, así que CMIIW.

Answer 2

Creo que deberías ir a la ruta de Javascript, o al menos yo:

<script type="text/javascript">
// Using jQuery.

$(function() {
    $(''form'').each(function() {
        $(this).find(''input'').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find(''input[type=submit]'').hide();
    });
});
</script>


<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" />
</form>

Answer 3

En lugar del truco que utiliza actualmente para ocultar el botón, sería mucho más sencillo establecer la visibility: collapse; en el atributo de estilo. Sin embargo, todavía recomendaría usar un poco de Javascript simple para enviar el formulario. Por lo que entiendo, el apoyo para tales cosas es ubicuo en la actualidad.

Answer 4

Esta es mi solución, probada en Chrome, Firefox 6 e IE7 +:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}

Answer 5

IE no permite presionar la tecla ENTRAR para enviar el formulario si el botón enviar no está visible y el formulario tiene más de un campo. Dale lo que quiere proporcionando una imagen transparente de 1x1 píxeles como un botón de envío. Por supuesto, tomará un píxel del diseño, pero mira lo que tienes que hacer para ocultarlo.

<input type="image" src="img/1x1trans.gif"/>

Answer 6

La forma más elegante de hacerlo es mantener el botón de envío, pero establecer su borde, relleno y tamaño de fuente en 0.

Esto hará que las dimensiones del botón 0x0.

<input type="submit" style="border:0; padding:0; font-size:0">

Puede intentarlo usted mismo y, al establecer un contorno para el elemento, verá un punto, que es el borde exterior que "rodea" el elemento 0x0 px.

No hay necesidad de visibilidad: oculta, pero si te hace dormir por la noche, también puedes lanzar eso en la mezcla.

JS Fiddle

Answer 7

Lo agregué a una función en el documento listo. Si no hay ningún botón de envío en el formulario (todos mis Formularios de diálogo de Jquery no tienen botones de envío), adjúntelo.

$(document).ready(function (){
    addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
    var hiddenSubmit = "<input type=''submit'' style=''position: absolute; left: -9999px; width: 1px; height: 1px;'' tabindex=''-1''/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}

Answer 8

Otra solución sin el botón de enviar:

HTML

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

jQuery

$(document).ready(function() {

  $(''.submit_on_enter'').keydown(function(event) {
    // enter has keyCode = 13, change it if you want to use another button
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });

});

Answer 9

Para aquellos que tienen problemas con IE y para otros también.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

Answer 10

Para cualquiera que busque esta respuesta en el futuro, HTML5 implementa un nuevo atributo para elementos de formulario, hidden , que aplicará automáticamente la display:none a su elemento.

p.ej

<input type="submit" hidden />

Answer 11

Podrías probar también esto

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

Podría incluir una imagen con ancho / alto = 0 px

Answer 12

Solo establece el atributo oculto en verdadero:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" hidden="true" />
</form>

Answer 13

Solución HTML5

<input type="submit" hidden />

Answer 14

Tratar:

<input type="submit" style="position: absolute; left: -9999px"/>

Eso empujará el botón hacia la izquierda, fuera de la pantalla. Lo bueno de esto es que obtendrías una degradación elegante cuando CSS está deshabilitado.

Actualización - Solución para IE7

Como lo sugirió Bryan Downing + con tabindex para evitar que la pestaña llegue a este botón (por Ates Goral):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

Answer 15

Use el siguiente código, esto solucionó mi problema en los 3 navegadores (FF, IE y Chrome):

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

Agregue la línea anterior como primera línea en su código con el valor apropiado de nombre y valor.

Answer 16

he usado

< input class="hidden" type="submit" value="" 
onclick="document.getElementById(''loginform'').submit()"; />

y

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

en el archivo .css. Funcionó mágicamente para mí también. :)

Answer 17

la forma más sencilla

<input type="submit" style="width:0px; height:0px; opacity:0;"/>

Answer 18

<input type="submit" style="display:none;"/>

Esto funciona bien y es la versión más explícita de lo que estás tratando de lograr.

Tenga en cuenta que existe una diferencia entre la display:none y la visibility:hidden para otros elementos del formulario.