Come impedire la pressione del tasto INVIO per inviare un modulo Web?

Come si impedisce a un ENTERtasto premuto di inviare un modulo in un'applicazione basata sul Web?

[ revisione 2012, nessun gestore in linea, conserva textarea entra nella gestione]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Ora puoi definire un gestore keypress nel modulo:
<form [...] onkeypress = "return checkEnter (event)">

document.querySelector('form').onkeypress = checkEnter;

Ecco un gestore jQuery che può essere utilizzato per interrompere l'inserimento di invii e anche il tasto backspace -> indietro. Le coppie (keyCode: selectorString) nell'oggetto "keyStop" vengono utilizzate per abbinare nodi che non devono attivare la loro azione predefinita.

Ricorda che il Web dovrebbe essere un luogo accessibile e questo sta infrangendo le aspettative degli utenti della tastiera. Detto questo, nel mio caso l'applicazione web su cui sto lavorando non piace comunque il pulsante Indietro, quindi disabilitare la scorciatoia da tastiera è OK. La discussione "dovrebbe entrare -> inviare" è importante, ma non correlata alla domanda effettiva posta.

Ecco il codice, a te pensare all'accessibilità e al motivo per cui vorresti davvero farlo!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

Restituisci semplicemente false dal gestore onsubmit

<form onsubmit="return false;">

o se vuoi un gestore nel mezzo

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

Dovrai chiamare questa funzione che annullerà semplicemente il comportamento di invio predefinito del modulo. Puoi collegarlo a qualsiasi campo di input o evento.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

Il tasto INVIO attiva semplicemente il pulsante di invio predefinito del modulo, che sarà il primo

<input type="submit" />

il browser trova nel modulo.

Pertanto non hai un pulsante di invio, ma qualcosa di simile

<input type="button" value="Submit" onclick="submitform()" /> 

MODIFICARE : in risposta alla discussione nei commenti:

Questo non funziona se hai solo un campo di testo, ma potrebbe essere quello il comportamento desiderato in quel caso.

L'altro problema è che questo si basa su Javascript per inviare il modulo. Questo può essere un problema dal punto di vista dell'accessibilità. Questo può essere risolto scrivendo <input type='button'/>con javascript, e quindi inserendo un <input type='submit' />a<noscript> tag tag. Lo svantaggio di questo approccio è che per i browser con javascript disabilitato avrai quindi invii di moduli su ENTER. Spetta all'OP decidere quale sia il comportamento desiderato in questo caso.

Non conosco alcun modo per farlo senza invocare javascript.

In breve la risposta in puro Javascript è:

<script type="text/javascript">
    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 disabilita solo l'azione di pressione del tasto "Invio" per input type = 'text'. I visitatori possono comunque utilizzare il tasto "Invio" in tutto il sito Web.

Se si desidera disabilitare "Invio" anche per altre azioni, è possibile aggiungere console.log (e); per i tuoi scopi di test e premi F12 in Chrome, vai alla scheda "console" e premi "backspace" sulla pagina e guarda al suo interno per vedere quali valori vengono restituiti, quindi puoi scegliere come target tutti quei parametri per migliorare ulteriormente il codice sopra per soddisfare le tue esigenze di "e.target.nodeName" , "e.target.type" e molti altri ...

Vedi la mia risposta dettagliata per una domanda simile qui

Tutte le risposte che ho trovato su questo argomento, qui o in altri post hanno uno svantaggio e cioè impediscono l'effettivo trigger di modifica anche sull'elemento del modulo. Pertanto, se si eseguono queste soluzioni, l'evento onchange non viene attivato. Per ovviare a questo problema ho modificato questi codici e sviluppato il seguente codice per me stesso. Spero che questo diventi utile per gli altri. Ho dato una lezione al mio modulo "prevent_auto_submit" e ho aggiunto il seguente JavaScript:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

L'ho sempre fatto con un gestore di tasti premuti come sopra in passato, ma oggi ho trovato una soluzione più semplice. Il tasto Invio attiva solo il primo pulsante di invio non disabilitato sul modulo, quindi in realtà tutto ciò che serve è intercettare quel pulsante cercando di inviare:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

Questo è tutto. I tasti premuti verranno gestiti come al solito dal browser / campi / ecc. Se la logica di invio-invio viene attivata, il browser troverà quel pulsante di invio nascosto e lo attiverà. E il gestore javascript impedirà quindi l'invio.

Ho trascorso un po 'di tempo a realizzare questo browser incrociato per IE8,9,10, Opera 9+, Firefox 23, Safari (PC) e Safari (MAC)

Esempio JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

Codice base: chiama questa funzione tramite "onkeypress" allegato al modulo e passa "window.event" al suo interno.

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

Quindi sul tuo modulo:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

Tuttavia, sarebbe meglio se non usassi JavaScript invadente.

Nel mio caso, questo jQuery JavaScript ha risolto il problema

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

Impedire che "INVIO" invii il modulo può causare inconvenienti ad alcuni dei tuoi utenti. Quindi sarebbe meglio se segui la seguente procedura:

Scrivi l'evento "onSubmit" nel tag del modulo:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

scrivere la funzione Javascript come segue:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

Qualunque sia il motivo, se si desidera impedire l'invio del modulo premendo il tasto Invio, è possibile scrivere la seguente funzione in javascript:

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

Grazie.

Aggiungi questo tag al tuo modulo - onsubmit="return false;" Quindi puoi inviare il modulo solo con alcune funzioni JavaScript.

Per impedire l'invio del modulo quando si preme enterin un campo textareao input, controllare l'evento di invio per trovare quale tipo di elemento ha inviato l'evento.

Esempio 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

Una soluzione migliore è se non si dispone di un pulsante di invio e si attiva l'evento con un pulsante normale. È meglio perché nel primo esempio vengono generati 2 eventi di invio, ma nel secondo esempio viene generato solo 1 evento di invio.

Esempio 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

Lo troverai più semplice e utile: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

Che ne dite di:

<asp:Button ID="button" UseSubmitBehavior="false"/>

Si prega di consultare questo articolo Come impedire che il tasto INVIO invii un modulo Web?

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

Puoi intrappolare il keydown su un modulo in javascript e prevenire il gorgogliamento uniforme, credo. INVIO su una pagina Web in pratica invia semplicemente il modulo in cui è posizionato il controllo attualmente selezionato.

Questo link fornisce una soluzione che ha funzionato per me in Chrome, FF e IE9 oltre all'emulatore per IE7 e 8 fornito con lo strumento di sviluppo di IE9 (F12).

http://webcheatsheet.com/javascript/disable_enter_key.php

Un altro approccio è quello di aggiungere il pulsante di input di invio al modulo solo quando dovrebbe essere inviato e sostituirlo con un semplice div durante la compilazione del modulo

Aggiungi semplicemente questo attributo al tuo tag FORM:

onsubmit="return gbCanSubmit;"

Quindi, nel tag SCRIPT, aggiungi questo:

var gbCanSubmit = false;

Quindi, quando si effettua un pulsante o per qualsiasi altro motivo (come in una funzione) si consente finalmente un invio, è sufficiente capovolgere il booleano globale ed eseguire una chiamata .submit (), simile a questo esempio:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

Mi sono imbattuto da solo perché ho più pulsanti di invio con diversi valori di "nome", in modo che quando vengono inviati fanno cose diverse sullo stesso file php. Il pulsante enter/ lo returninterrompe poiché tali valori non vengono inviati. Quindi stavo pensando, il pulsante enter/ returnattiva il primo pulsante di invio nel modulo? In questo modo potresti avere un pulsante di invio "vaniglia" che è nascosto o ha un valore "nome" che restituisce il file php in esecuzione alla pagina con il modulo in esso. Oppure un valore "nome" predefinito (nascosto) che il tasto premuto attiva e i pulsanti di invio sovrascrivono con i propri valori "nome". Solo un pensiero.

Che ne dite di:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

E basta dare un nome al pulsante giusto e verrà comunque inviato, ma i campi di testo, ad esempio il TargetOriginal esplicito quando si preme return in uno, non avranno il nome giusto.

Questo ha funzionato per me.
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

Ecco come lo farei:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

messo nel file esterno javascript

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

o da qualche parte all'interno del body tag

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Ho avuto lo stesso problema (moduli con tonnellate di campi di testo e utenti non qualificati).

L'ho risolto in questo modo:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

usando questo nel codice HTML:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

In questo modo il ENTERtasto funziona come previsto, ma è necessaria una conferma (di ENTERsolito un secondo tocco).

Lascio ai lettori la ricerca di uno script che invii l'utente nel campo in cui ha premuto ENTERse decide di rimanere sul modulo.