Evite que los usuarios envíen un formulario presionando Enter

Question

Tengo una encuesta en un sitio web y parece haber algunos problemas con los usuarios que presionan Intro (no sé por qué) y envían accidentalmente la encuesta (formulario) sin hacer clic en el botón Enviar.¿Hay alguna manera de prevenir esto?

Estoy usando HTML, PHP 5.2.9 y jQuery en la encuesta.

Answer 1

Puede utilizar un método como

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

En la lectura de los comentarios en el post original, para que sea más fácil de usar y permiten que la gente presione Intro si han completado todos los campos:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

Answer 2

No permitir la tecla enter en cualquier lugar

Si usted no tiene un <textarea> en su forma, a continuación, sólo tiene que añadir lo siguiente a su <form>:

<form ... onkeydown="return event.key != 'Enter';">

O con jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Esto hará que cada pulsación de tecla en el interior del formulario será verificado en el key. Si no se Enter, luego volverá true y cualquier cosa continúan como de costumbre. Si se trata de Enter, entonces se volverá false y nada se detendrá de inmediato, por lo que no se envía el formulario.

El evento keydown se prefiere sobre keyup como el keyup es demasiado tarde para bloquear el envío de formulario. Históricamente también el keypress era, pero esto está en desuso , como es el KeyboardEvent.keyCode . Debe utilizar KeyboardEvent.key vez que devuelve el nombre de la clave que se está presionado. Cuando se comprueba Enter, entonces esto sería comprobar 13 (normal entrar), así como 108 (numpad ENTER).

Tenga en cuenta que $(window) como se sugiere en algunas otras respuestas en vez de $(document) no funciona para keydown / keyup en IE <= 8, por lo que no es una buena opción si usted es como para cubrir aquellos usuarios pobres también.

Permitir clave de introducir en las áreas de texto sólo

Si usted tiene un <textarea> en su forma (que por supuesto debe aceptar la tecla Intro), luego agregar el controlador keydown a cada elemento de entrada individual, que no es un <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Para reducir repetitivo, esto es mejor que hacer con jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Si usted tiene otras funciones de controlador de eventos adjuntos en los elementos de entrada, que también le gustaría invocar en tecla enter, por alguna razón, entonces sólo prevenir el comportamiento predeterminado del evento en lugar de devolver falso, por lo que se puede propagar correctamente a otros manipuladores .

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Permitir introducir clave en las áreas de texto y botones de envío sólo

Si desea permitir la tecla enter en los botones de envío <input|button type="submit"> también, entonces siempre se puede refinar el selector de la siguiente manera.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

Tenga en cuenta que input[type=text] como se sugiere en algunas otras respuestas no cubre esas entradas no son de texto HTML5, por lo que no es una buena selección.

Answer 3

tuve que coger los tres eventos relacionados con la pulsación de teclas con el fin de evitar que la forma de ser presentado:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Puede combinar todo lo anterior en una versión compacta agradable:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Answer 4

Sección 4.10.22.2 presentación implícita de la especificación HTML5 W3C dice:

  

A form botón predeterminado del elemento es la primera botón de envío en árbol orden cuya dueño de la forma form elemento.

     

Si el agente de usuario soporta dejar que el usuario envíe un formulario de forma implícita (por ejemplo, en algunas plataformas que golpean la tecla "enter", mientras que un campo de texto se centra implícitamente envía el formulario), y luego hacerlo de una forma cuya tiene un definido comportamiento de activación debe causar que el agente de usuario a Ejecutar en ese botón predeterminado .

     

    

Nota: consecuencia, si el está desactivada, el formulario no se presenta cuando se utiliza un mecanismo de presentación tales implícita. (Un botón de activación tiene un comportamiento sin cuando está desactivado.)

  

Por lo tanto, de una manera compatible con los estándares de desactivar cualquier presentación implícita de la forma es colocar un botón de envío discapacitados como el primer botón de presentar en la forma:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Una característica interesante de este enfoque es que funciona sin JavaScript ; si o no JavaScript está activada, se necesita un navegador web conformes normas para evitar el envío de formularios implícita.

Answer 5

Si utiliza una secuencia de comandos para hacer envíe el real, a continuación, puede añadir "return false" línea al controlador de onsubmit como esto:

<form onsubmit="return false;">

Llamar a enviar () en el formulario de JavaScript no se disparará el evento.

Answer 6

Uso:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Esta solución funciona en todos los formularios de una página web (también en los formularios insertados con el Ajax), evitando solamente Intro s en los textos de entrada. Colocarlo en una función de lista de documentos, y olvidarse de este problema para una vida.

Answer 7

En lugar de evitar que los usuarios presionar Intro , que puede parecer poco natural, puede dejar la forma como está y añadir un poco de validación en el cliente extra: Cuando la encuesta no está terminado, el resultado no se envía con el servidor y el usuario recibe un mensaje diciendo lo que tiene que ser terminado para completar el formulario. Si está utilizando jQuery, pruebe el plugin de validación:

http://docs.jquery.com/Plugins/Validation

Esto requerirá más trabajo que agarrar la entra en el botón , pero seguro que proporcionará una experiencia de usuario más rica.

Answer 8

No puedo comentar todavía, así que publicaré una nueva respuesta.

La respuesta aceptada está bien, pero no detuvo el envío al ingresar con el teclado numérico.Al menos en la versión actual de Chrome.Tuve que modificar la condición del código clave para que funcione.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Answer 9

Una buena solución simple y pequeño jQuery:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Answer 10

Es mi solución para alcanzar la meta, es limpio y eficaz.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Answer 11

Un enfoque completamente diferente:

1. La primera <button type="submit"> en forma se activa al pulsar Intro .
2. Esto es cierto incluso si el botón está escondida con style="display:none;
3. El guión de ese botón puede volver false, que aborta el proceso de envío.
4. Usted todavía puede tener otra <button type=submit> para enviar el formulario. Sólo volver a caer en cascada true la presentación.
5. Si se pulsa Intro , mientras que el verdadero botón de envío se centra activará el botón de enviar verdadero.
6. Si se pulsa Intro dentro <textarea> u otros controles de formulario se comportarán de forma normal.
7. Si se pulsa Intro dentro de los controles de formulario <input> activarán la primera <button type=submit>, que devuelve false, y por lo tanto no pasa nada.

Así:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Answer 12

Dar forma una acción de 'javascript: void (0);' parece hacer el truco

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Answer 13

que necesitaba para evitar entradas solamente específicos de presentación, por lo que utiliza un selector de clase, para que esto sea una función de "global" donde quiera que lo necesite.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Y el código jQuery:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Alternativamente, si keydown es insuficiente:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Algunas notas:

La modificación de diversas buenas respuestas aquí, la tecla Intro parece funcionar para keydown en todos los navegadores. Para la alternativa, he actualizado bind() al método on().

Soy un gran fan de los selectores de clase, un peso de todos los pros y los contras y discusiones de rendimiento. Mi convenio de denominación es 'idSomething' para indicar jQuery lo está utilizando como un id, para separarlo de estilo CSS.

Answer 14

1. No utilice type = "submit" para entradas o botones.
2. Uso tipo "botón" = y utilizar js [Jquery / angular / etc] para enviar el formulario al servidor.

Answer 15

Se podría hacer un método JavaScript para comprobar para ver si el Introduzca fue golpeado tecla , y si lo es, para detener el envío.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Sólo tiene que llamar que en el método de envío.

Answer 16

No poner un botón de envío podría hacer. Sólo hay que poner un guión a la entrada (tipo botón =) o añadir eventListener si quieres que presentara los datos en el formulario.

utilizar Más bien este

<input type="button">

que el uso de este

<input type="submit">

Answer 17

He tenido un problema similar, donde tuve una cuadrícula con campos de texto "Ajax" (Yu CGridView) y sólo un botón de envío. Cada vez que hice una búsqueda en un campo de texto y pulsa enter el formulario enviado. Tenía que hacer algo con el botón porque era el único botón común entre los puntos de vista (patrón MVC). Todo lo que tenía que hacer era quitar y poner type="submit" onclick="document.forms[0].submit()

Answer 18

Creo que está bien cubierta con todas las respuestas, pero si usted está usando un botón con un poco de código de validación JavaScript que sólo podía establecer onkeypress de la forma en Enter para llamar a su presentamos como se esperaba:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Los JS OnKeyPress podrían ser lo que tiene que hacer. No hay necesidad de un cambio global más grande. Esto es especialmente cierto si usted no es el que la codificación de la aplicación desde cero, y que ha sido puesta en solución de otra persona sitio web sin destrozarlo y volver a probarlo.

Answer 19

Hay muchas buenas respuestas aquí ya, sólo quiero aportar algo desde una perspectiva UX. controles de teclado en formas son muy importante.

La pregunta es cómo desactivar desde la presentación de Enter pulsación de tecla. No la forma de ignorar Enter en toda la aplicación. Así que considere fijar el manejador a un elemento de formulario, no la ventana.

La desactivación Enter para el envío de formularios todavía debe permitir lo siguiente:

1. Formulario de presentación a través de Enter al botón de enviar se concentra.
2. presentación de formularios cuando todos los campos están poblados.
3. Interacción con no botones de envío a través de Enter.

Esto es sólo repetitivo pero sigue las tres condiciones.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Answer 20

SOLO BLOQUE DE PRESENTAR pero no otra, la funcionalidad importante de la tecla enter, tales como la creación de un nuevo párrafo en un <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Answer 21

En mi caso particular tuve que dejar de entrar desde la presentación de la forma y también simular el clic del botón de enviar. Esto se debe a que el botón de enviar tuvo un controlador de clic en él porque estábamos dentro de una ventana modal (viejo código heredado). En cualquier caso, aquí está mi combo soluciones para este caso.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Este caso de uso es especialmente útil para las personas que trabajan con IE8.

Answer 22

Esto funciona para mí

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Answer 23

Algo que no he visto aquí la respuesta: cuando salta a través de los elementos de la página, al pulsar ENTER cuando se llega al botón de enviar activará el manejador onsubmit en el formulario, pero va a grabar el evento como un MouseEvent. Aquí está mi corta solución para cubrir la mayoría de las bases:

Esto no es una respuesta relacionada con jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Para encontrar un ejemplo de trabajo: https://jsfiddle.net/nemesarial/6rhogva2/

Answer 24

Me gustaría añadir un poco de código CoffeeScript (no pruebas de campo):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(espero que les guste el buen truco en la cláusula menos.)

Answer 25

Ve a tu CSS y añadir que a continuación se bloqueará automáticamente la presentación de su formular, siempre y cuando usted tiene presentará entrada si ya no desea que se lo puede eliminar o escribe activate y deactivate lugar

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Answer 26

Con Javascript (sin comprobar cualquier campo de entrada):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

Si alguien quiere aplicar esto en campos específicos, como por ejemplo el tipo de texto de entrada:

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
            e.preventDefault();
            return false;
        }
    }
}, true);
</script>

Esto funciona bien en mi caso.

Answer 27

Esto ha funcionado para mí en todos los navegadores después de mucha frustración con otras soluciones. La función externa NAME_SPACE es sólo para mantenerse alejado de variables globales que declaran, algo que también recomiendo.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

uso de la muestra:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Answer 28

Uso:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>

Answer 29

En mi caso he tenido un par de campos y áreas de texto de autocompletar jQuery UI en una forma , por lo que definitivamente quería que aceptar Intro . Así que me quité la entrada type="submit" de un formulario y añadí un <a href="" id="btn">Ok</a> ancla en su lugar. Entonces LABRÓ como un botón y añade el siguiente código:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

Si un usuario rellena todos los campos requeridos, validateData() tiene éxito y la forma se somete.