Impedisci agli utenti di inviare un modulo premendo Invio

Ho un sondaggio su un sito Web e sembra che ci siano alcuni problemi con gli utenti che premono invio (non so perché) e che inviano accidentalmente il sondaggio (modulo) senza fare clic sul pulsante di invio. C'è un modo per impedirlo?

Sto usando HTML, PHP 5.2.9 e jQuery per il sondaggio.

Puoi usare un metodo come

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

Nel leggere i commenti sul post originale, per renderlo più utilizzabile e consentire alle persone di premere Enterse hanno completato tutti i campi:

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;
    }
  });
});

Non consentire la chiave di invio ovunque

Se non hai un <textarea>nel tuo modulo, aggiungi semplicemente quanto segue al tuo <form>:

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

O con jQuery:

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

Ciò farà sì che ogni tasto premuto all'interno del modulo verrà controllato sul key. In caso contrario Enter, tornerà truee tutto continuerà come al solito. Se lo è Enter, allora tornerà falsee qualsiasi cosa si fermerà immediatamente, quindi il modulo non verrà inviato.

L' keydownevento è preferito keyupperché keyupè troppo tardi per bloccare l'invio del modulo. Storicamente c'era anche il keypress, ma questo è deprecato, così come il KeyboardEvent.keyCode. Si dovrebbe usare KeyboardEvent.keyinvece che restituisce il nome del tasto premuto. Quando Enterè selezionato, quindi verificherebbe 13 (invio normale) e 108 (immissione tastierino numerico).

Nota che, $(window)come suggerito in alcune altre risposte, invece $(document)non funziona per keydown/ keyupin IE <= 8, quindi non è una buona scelta se ti piace coprire anche quegli utenti poveri.

Consenti il ​​tasto Invio solo sulle aree di testo

Se hai un <textarea>nel tuo modulo (che ovviamente dovrebbe accettare il tasto Invio), aggiungi il gestore keydown a ogni singolo elemento di input che non è un <textarea>.

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

Per ridurre il boilerplate, è meglio farlo con jQuery:

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

Se hai altre funzioni del gestore eventi associate a quegli elementi di input, che vorresti anche invocare sulla chiave di invio per qualche motivo, previeni solo il comportamento predefinito dell'evento invece di restituire false, quindi può propagarsi correttamente ad altri gestori.

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

Consenti il ​​tasto Invio sulle aree di testo e invia solo i pulsanti

Se desideri consentire anche il tasto Invio sui pulsanti di invio <input|button type="submit">, puoi sempre perfezionare il selettore come di seguito.

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

Nota che, input[type=text]come suggerito in alcune altre risposte, non copre quegli input HTML5 non testuali, quindi non è un buon selettore.

La sezione 4.10.22.2 La presentazione implicita delle specifiche HTML5 del W3C dice:

Un formdell'elemento pulsante predefinito è il primo pulsante di invio in ordine albero il cui proprietario del modulo è che formelemento.

Se i supporti user agent lasciando l'utente inviare un modulo in modo implicito (ad esempio, su alcune piattaforme colpire il tasto "Enter", mentre un campo di testo è focalizzato implicitamente invia il modulo), quindi farlo per una forma il cui pulsante di default ha un definito di attivazione il comportamento deve indurre l'agente utente a eseguire passaggi di attivazione di clic sintetici su quel pulsante predefinito .

Nota: di conseguenza, se il pulsante predefinito è disabilitato, il modulo non viene inviato quando viene utilizzato un meccanismo di invio implicito. (Un pulsante non ha alcun comportamento di attivazione quando disabilitato.)

Pertanto, un modo conforme agli standard per disabilitare qualsiasi invio implicito del modulo consiste nel posizionare un pulsante di invio disabilitato come primo pulsante di invio nel modulo:

<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 bella caratteristica di questo approccio è che funziona senza JavaScript ; indipendentemente dal fatto che JavaScript sia abilitato, è necessario un browser Web conforme agli standard per impedire l'invio implicito di moduli.

Ho dovuto prendere tutti e tre gli eventi relativi alla pressione dei tasti per impedire l'invio del modulo:

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

Puoi combinare tutto quanto sopra in una bella versione compatta:

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

Se si utilizza uno script per eseguire l'invio effettivo, è possibile aggiungere la riga "return false" al gestore onsubmit in questo modo:

<form onsubmit="return false;">

La chiamata a submit () sul modulo da JavaScript non attiverà l'evento.

Uso:

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

Questa soluzione funziona su tutti i moduli di un sito Web (anche su moduli inseriti con Ajax), impedendo solo messaggi Enterdi testo. Inseriscilo in una funzione pronta per il documento e dimentica questo problema per tutta la vita.

Invece di impedire agli utenti di premere Enter , il che può sembrare innaturale, puoi lasciare il modulo così com'è e aggiungere un po 'di convalida sul lato client: quando il sondaggio non è finito, il risultato non viene inviato al server e l'utente riceve un bel messaggio che dice cosa deve essere completato per completare il modulo. Se si utilizza jQuery, provare il plug-in di convalida:

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

Ciò richiederà più lavoro rispetto alla cattura del Enterpulsante, ma sicuramente fornirà un'esperienza utente più ricca.

Una soluzione semplice e carina jQuery:

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

Non posso ancora commentare, quindi posterò una nuova risposta

La risposta accettata è ok-ish, ma non si è fermata il comando invio al comando numpad. Almeno nella versione corrente di Chrome. Ho dovuto modificare la condizione del codice chiave a questo, quindi funziona.

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

È la mia soluzione per raggiungere l'obiettivo, è pulito ed efficace.

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

Un approccio completamente diverso:

1. Il primo <button type="submit">nel modulo verrà attivato premendoEnter .
2. Questo è vero anche se il pulsante è nascosto con style="display:none;
3. Lo script per quel pulsante può tornare false , il che interrompe il processo di invio.
4. Puoi ancora averne un altro <button type=submit>per inviare il modulo. Basta tornare truea cascata l'invio.
5. Premendo Entermentre il pulsante di invio reale è focalizzato attiverà il pulsante di invio reale.
6. Premendo Enterdentro <textarea>o altri controlli del modulo si comporterà normalmente.
7. La pressione Enterall'interno dei <input>controlli del modulo attiverà il primo <button type=submit>, che ritorna false, e quindi non accade nulla.

Così:

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

Dare al modulo un'azione di 'javascript: void (0);' sembra fare il trucco

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

Non mettere un pulsante di invio potrebbe fare. Basta inserire uno script nell'input (tipo = pulsante) o aggiungere eventListener se si desidera che invii i dati nel modulo.

Piuttosto usa questo

<input type="button">

che usare questo

<input type="submit">

1. Non utilizzare type = "submit" per input o pulsanti.
2. Utilizzare type = "button" e utilizzare js [Jquery / angular / etc] per inviare il modulo al server.

Avevo bisogno di impedire l'invio solo di input specifici, quindi ho usato un selettore di classe, per lasciare che questa fosse una funzionalità "globale" ovunque ne avessi bisogno.

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

E questo codice jQuery:

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

In alternativa, se il keydown non è sufficiente:

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

Alcune note:

Modificando varie buone risposte qui, la Enterchiave sembra funzionare keydownsu tutti i browser. In alternativa, ho aggiornato bind()il on()metodo.

Sono un grande fan dei selezionatori di classe, soppesando tutti i pro e contro e le discussioni sulle prestazioni. La mia convenzione di denominazione è "idSomething" per indicare che jQuery lo sta usando come id, per separarlo dallo stile CSS.

È possibile creare un metodo JavaScript per verificare se la Enterchiave è stata premuta e, in caso affermativo, per interrompere l'invio.

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

Basta chiamarlo sul metodo di invio.

SOLO BLOCCO INVIA ma non altre importanti funzionalità della chiave di invio, come la creazione di un nuovo paragrafo in 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>

Questo è il modo perfetto, non verrai reindirizzato dalla tua pagina

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

Ho avuto un problema simile, in cui avevo una griglia con "campi di testo Ajax" (Yii CGridView) e un solo pulsante di invio. Ogni volta che ho fatto una ricerca su un campo di testo e ho premuto il modulo inviato. Ho dovuto fare qualcosa con il pulsante perché era l'unico pulsante comune tra le viste (modello MVC). Tutto quello che dovevo fare era rimuovere type="submit"e mettereonclick="document.forms[0].submit()

Penso che sia ben coperto con tutte le risposte, ma se stai usando un pulsante con un codice di convalida JavaScript potresti semplicemente impostare il tasto onkeypress del modulo per Invio per chiamare l'invio come previsto:

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

L'onkeypress JS potrebbe essere qualsiasi cosa tu debba fare. Non è necessario un cambiamento globale più ampio. Ciò è particolarmente vero se non sei tu a codificare l'app da zero e sei stato portato a riparare il sito Web di qualcun altro senza strapparlo e riprovarlo.

Ci sono già molte buone risposte qui, voglio solo contribuire con una prospettiva UX. I controlli da tastiera nei moduli sono molto importanti.

La domanda è come disabilitare dall'invio alla pressione dei tasti Enter. Non come ignorare Enterin un'intera applicazione. Quindi considera di collegare il gestore a un elemento del modulo, non alla finestra.

La disabilitazione Enterper l'invio del modulo dovrebbe comunque consentire quanto segue:

1. Invio del modulo tramite Enterquando il pulsante di invio è attivo.
2. Invio del modulo quando tutti i campi sono popolati.
3. Interazione con i pulsanti di non invio tramite Enter.

Questo è solo un boiler ma segue tutte e tre le condizioni.

$('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;
  }
});

Qualcosa a cui non ho visto risposta qui: quando si sfogliano gli elementi nella pagina, premendo Enterquando si arriva al pulsante di invio si attiverà il gestore onsubmit sul modulo, ma registrerà l'evento come MouseEvent. Ecco la mia breve soluzione per coprire la maggior parte delle basi:

Questa non è una risposta relativa a 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();
}

Per trovare un esempio funzionante: https://jsfiddle.net/nemesarial/6rhogva2/

Nel mio caso specifico ho dovuto impedire a INVIO di inviare il modulo e simulare anche il clic del pulsante di invio. Questo perché il pulsante di invio aveva un gestore di clic perché eravamo all'interno di una finestra modale (vecchio codice ereditato). In ogni caso, ecco le mie soluzioni combo per questo 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;
        }
    });

Questo caso d'uso è particolarmente utile per le persone che lavorano con IE8.

Questo funziona per me

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

Vorrei aggiungere un piccolo codice CoffeeScript (non testato sul campo):

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

(Spero che ti piaccia il bel trucco nella clausola a meno).

Utilizzo di Javascript (senza controllare alcun campo di input):

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

Se qualcuno desidera applicarlo su campi specifici, ad esempio digita il testo di tipo:

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

Questo funziona bene nel mio caso.

Vai nel tuo CSS e aggiungilo ad esso, quindi bloccherà automaticamente l'invio del tuo formular fintanto che avrai l'input se non lo desideri più puoi cancellarlo o digitare activatee deactivateinvece

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

È inoltre possibile utilizzare javascript:void(0)per impedire l'invio di moduli.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

Questo ha funzionato per me in tutti i browser dopo molte frustrazioni con altre soluzioni. La funzione esterna name_space è solo per evitare di dichiarare i globali, cosa che consiglio anche.

$(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;    
        }
    }
}

Esempio di utilizzo:

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

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>