Impedisci agli utenti di inviare un modulo premendo Invio

Question

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

Sto utilizzando HTML, PHP 5.2.9 e jQuery nel sondaggio.

Answer 1

È possibile utilizzare 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ù fruibile e permettere alle persone di premere Invio se 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;
    }
  });
});

Answer 2

Non consentire chiave di entrare ovunque

Se non si dispone di un <textarea> nel modulo, poi basta aggiungere il seguente al vostro <form>:

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

O con jQuery:

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

Questo farà sì che ogni pressione di un tasto all'interno del modulo sarà controllata sul key. Se non è Enter, allora tornerà true e tutto continua come al solito. Se è Enter, allora tornerà false e tutto si fermerà immediatamente, in modo che il modulo non sarà presentato.

Il keydown evento è preferito a keyup come il keyup è troppo tardi per bloccare modulo presentare. Storicamente c'è stata anche la keypress , ma questo è deprecato , come è il KeyboardEvent.keyCode . Si dovrebbe usare KeyboardEvent.key invece che restituisce il nome del tasto premuto. Quando Enter è selezionata, allora questo potrebbe controllare 13 (normale enter) e 108 (TN enter).

Si noti che $(window) come suggerito in alcune altre risposte, invece di $(document) non funziona per keydown / keyup in IE <= 8, in modo che non è una buona scelta se siete come per coprire quei poveri utenti pure.

Consenti entrano tasto textareas solo

Se si dispone di un <textarea> nel modulo (che ovviamente dovrebbe di accettare il tasto Invio), quindi aggiungere il gestore keydown ad ogni elemento di input individuo che non è un <textarea>.

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

Per ridurre boilerplate, questo è meglio essere fatto con jQuery:

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

Se si dispone di altre funzioni di gestione degli eventi collegati su quegli elementi di input, quali desideri anche per invocare su Inserisci chiave, per qualche motivo, quindi evitare che solo il comportamento predefinito di eventi invece di tornare falso, in modo che possa correttamente propagarsi ad altri gestori .

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

Consenti tasto Invio sulla textarea e bottoni di invio solo

Se vuoi permettere tasto Invio sulla presentare pulsanti <input|button type="submit"> troppo, allora si può sempre perfezionare il selettore come di seguito.

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

Si noti che input[type=text] come suggerito in alcune altre risposte non coprire gli ingressi non di testo HTML5, in modo che non è una buona selezione.

Answer 3

Ho dovuto prendere tutti e tre gli eventi legati alla pressione dei tasti al fine di evitare che il modulo venga inviato:

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

È possibile combinare tutto quanto sopra in una bella versione compatta:

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

Answer 4

Sezione 4.10.22.2 presentazione implicito della specifica W3C HTML5 dice:

  

Un form pulsante dell'elemento default è il primo pulsante di invio in albero di ordine cui proprietario del modulo è che form elemento.

     

Se il programma utente supporta consentendo all'utente di 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 le cui ha definito comportamento attivazione deve causare il programma utente di Esegui su quel pulsante predefinito .

     

    

Nota: rel Di conseguenza, se la è disabilitato, il modulo non viene inviato quando viene utilizzato un tale meccanismo di invio implicito. (A pulsante non ha comportamento attivazione quando è disabilitato.)

  

Quindi, un modo conforme agli standard di disattivare qualsiasi sottomissione implicita della forma è quello di mettere un pulsante disattivato presentare come il primo pulsante di invio in 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 caratteristica piacevole di questo approccio è che funziona senza JavaScript ; anche se non è abilitato JavaScript, è necessario un browser Web standard conformi a prevenire implicita invio del modulo.

Answer 5

Se si utilizza uno script per fare l'attuale presentare, quindi è possibile aggiungere "return false" linea al gestore onsubmit in questo modo:

<form onsubmit="return false;">

Calling presentare () sul modulo da JavaScript non attivare l'evento.

Answer 6

Usa:

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

Questa soluzione funziona su tutte le forme su un sito web (anche su forme inserite con l'Ajax), impedendo solo Invio s in testi di input. Mettere in una funzione pronta documenti, e dimenticare questo problema per una vita.

Answer 7

Invece di impedire agli utenti di premere Invio , che può sembrare innaturale, è possibile lasciare il modulo come è e aggiungere un po 'di validazione lato client in più: quando l'indagine non è finito il risultato non viene inviato al server e l'utente ottiene un bel messaggio che ciò che deve essere finito di compilare il modulo. Se si utilizza jQuery, provare il plugin di convalida:

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

Ciò richiederà più lavoro che cattura il Inserire pulsante , ma sicuramente sarà fornire un'esperienza utente più ricca.

Answer 8

Non posso ancora commentare, quindi pubblicherò una nuova risposta

La risposta accettata è ok, ma non interrompeva l'invio premendo il tastierino numerico.Almeno nella versione attuale di Chrome.Ho dovuto modificare la condizione del codice chiave in questo modo, quindi funziona.

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

Answer 9

Un bel po 'di semplice soluzione di jQuery:

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

Answer 10

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

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

Answer 11

Un approccio completamente diverso:

1. La prima <button type="submit"> in forma sarà attivata premendo Invio .
2. Questo è vero anche se il pulsante è nascosta con style="display:none;
3. Lo script per tale pulsante può restituire false, che interrompe il processo di invio.
4. È ancora possibile avere un altro <button type=submit> per inviare il modulo. Basta tornare true a cascata la presentazione.
5. Premendo Invio mentre il vero pulsante di invio è focalizzata attiverà il pulsante vera presentare.
6. Premendo Invio all'interno <textarea> o altri controlli che si comporteranno come normali.
7. Premendo Invio all'interno controlli dei moduli <input> attiveranno il primo <button type=submit>, che restituisce false, e, quindi, non succede nulla.

In questo modo:

<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

Dare la forma 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>

Answer 13

mi serviva per impedire immissioni solo determinati dalla presentazione, quindi ho usato un selettore di classe, di lasciare che questa sia una caratteristica "globale" ovunque ho 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 keydown è insufficiente:

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

Alcune note:

Modifica delle varie buone risposte qui, il tasto Invio sembra funzionare per keydown su tutti i browser. Per l'alternativa, ho aggiornato bind() al metodo on().

Sono un grande fan di selettori di classe, del peso di tutti i pro ei contro e le discussioni di prestazioni. Il mio convenzione di denominazione è 'idSomething' per indicare jQuery sta usando come un id, per separarlo dalla stile CSS.

Answer 14

1. Non utilizzare type = "submit" per gli ingressi o pulsanti.
2. Usa type = "button" e utilizzare js [Jquery / angolare / etc] per presentare il modulo al server.

Answer 15

Si potrebbe fare un metodo JavaScript per controllare per vedere se il Invio è stato colpito, e se lo è, per fermare il submit.

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

Basta chiamare che sul metodo di invio.

Answer 16

Non mettere un pulsante di invio potrebbe fare. Basta mettere uno script per l'ingresso (tipo di pulsante =) o aggiungere eventListener se si vuole che presentare i dati in forma.

Piuttosto utilizzare questo

<input type="button">

rispetto all'utilizzo di questo

<input type="submit">

Answer 17

Ho avuto un problema simile, dove ho avuto una griglia con i "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 premere Invio il modulo inviato. Dovevo fare qualcosa con il pulsante perché era l'unico tasto comune tra i punti di vista (pattern MVC). Tutto quello che dovevo fare era rimuovere type="submit" e mettere onclick="document.forms[0].submit()

Answer 18

Credo che sia ben coperto con tutte le risposte, ma se si utilizza un pulsante con un codice di validazione JavaScript si può solo impostare onkeypress del form per l'invio per chiamare il presentare come previsto:

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

I JS onkeypress potrebbe essere quello che devi fare. Non c'è bisogno di una più grande, cambiamento globale. Ciò è particolarmente vero se non sei quello codifica l'applicazione da zero, e sei stato portato nella correzione di qualcun altro sito web senza strapparla a parte e ri-testarlo.

Answer 19

Non ci sono molte buone risposte già qui, voglio solo contribuire con qualcosa dal punto di vista UX. controlli da tastiera in forme sono molto importante.

La domanda è: come disattivare dalla presentazione sulla pressione dei tasti Enter. Non come ignorare Enter in un'intera applicazione. Quindi, considerare di imporre al gestore ad un elemento del modulo, non è la finestra.

La disattivazione Enter per modulo di presentazione dovrebbe comunque consentire il seguente:

1. invio del modulo tramite Enter quando pulsante di invio è a fuoco.
2. invio del modulo quando tutti i campi sono popolate.
3. L'interazione con i tasti non inviare tramite Enter.

Questa è solo testo standard 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;
  }
});

Answer 20

SOLO BLOCCO INVIA ma non altri, importanti funzionalità del tasto enter, 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>

Answer 21

Nel mio caso specifico ho dovuto smettere ENTER dal presentare la forma e anche simulare il click del pulsante di invio. Questo perché il pulsante di invio ha avuto un gestore di clic su di esso perché eravamo all'interno di una finestra modale (vecchio codice ereditato). In ogni caso ecco le mie soluzioni combinate 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.

Answer 22

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

Answer 23

Qualcosa che non ho visto ha risposto qui:quando scorri gli elementi della pagina, premendo accedere quando arrivi al pulsante di invio 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/

Answer 24

Mi piacerebbe aggiungere un po 'di codice CoffeeScript (Il campo testato):

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

(Io vi auguro come il bel trucco nel salvo clausola.)

Answer 25

Vai al tuo CSS e aggiungere che ad esso poi blocca automaticamente la presentazione del formulario finché si dispone di inviare in ingresso se non si desidera più che è possibile eliminarlo o il tipo activate e deactivate invece

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

Answer 26

Utilizzando JavaScript (senza controllare qualsiasi 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 vuole applicare questo su campi specifici, per esempio tipo di input di testo:

<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 metodo funziona bene nel mio caso.

Answer 27

Questo ha funzionato per me in tutti i browser, dopo molta frustrazione con altre soluzioni. La funzione esterna NAME_SPACE è solo quello di stare lontano da globali dichiarano, qualcosa 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;    
        }
    }
}

uso Esempio:

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

Answer 28

Usa:

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

Nel mio caso ho avuto un paio di campi e textareas completamento automatico jQuery UI in una forma , così ho sicuramente li volevo accettare Invio . Così ho rimosso l'ingresso type="submit" da una forma e ha aggiunto un <a href="" id="btn">Ok</a> ancoraggio invece. Poi ho Styled come un pulsante e ha aggiunto il seguente codice:

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

Se un utente compila tutti i campi richiesti, validateData() riesce e la forma sostiene.