jquery deaktivieren Formular bei Eingabe einreichen

207

Ich habe das folgende Javascript auf meiner Seite, das nicht zu funktionieren scheint.

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

Ich möchte das Senden des Formulars bei der Eingabe deaktivieren oder, noch besser, das Senden meines Ajax-Formulars aufrufen. Beide Lösungen sind akzeptabel, aber der oben angegebene Code verhindert nicht, dass das Formular gesendet wird.

Adam Levitt
quelle
3
Hier ist eine einfache Lösung nur für HTML: stackoverflow.com/a/51507806/337934
SamB

Antworten:

420

Wenn keyCodenicht gefangen wird, fangen Sie which:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

EDIT: habe es verpasst, es ist besser zu verwenden keyupalskeypress

BEARBEITEN 2: Wie in einigen neueren Versionen von Firefox wird das Senden von Formularen nicht verhindert. Es ist sicherer, das Tastendruckereignis auch dem Formular hinzuzufügen. Außerdem funktioniert es nicht mehr (mehr?), Indem das Ereignis nur an den Formularnamen "gebunden" wird, sondern nur an die Formular-ID. Deshalb habe ich dies deutlicher gemacht, indem ich das Codebeispiel entsprechend geändert habe.

EDIT 3: Geändert bind()zuon()

Zessx
quelle
15
jQuery normalisiert es auf e.which, sodass Sie nicht auf e.keyCode+1 für die wahrscheinlichste Ursache dieses Problems testen müssen .
Bojangles
4
Benötigen Sie return false;dafür? e.preventDefault();scheint genug
Chromigo
10
Wichtig! Dieser Lösungsblock bricht im Textbereich.
Deutscher Khokhlov
4
Das Problem ist, wenn ich in derselben Form ein Textfeld habe, kann ich jetzt keine Eingabe (um eine neue Zeile zu erstellen) in das Textfeld einfügen.
Tikky
3
keyCode === 13 && !$(e.target).is('textarea')
Teran
62

Normalerweise wird das Formular gesendet, Enterwenn Sie sich auf Eingabeelemente konzentrieren.

Wir können den EnterSchlüssel (Code 13) für Eingabeelemente in einem Formular deaktivieren :

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

DEMO: http://jsfiddle.net/bnx96/325/

Vision
quelle
Die Schaltfläche "iOS Go" war mein Problem in einem benutzerdefinierten Eingabefeld für die automatische Vervollständigung. Dies löste es.
Dylan Valade
11
Dies verhindert, dass die Eingabetaste in textareasderselben Form verwendet wird. Verwenden $("form input")statt $("form :input")scheint es zu beheben. DEMO: jsfiddle.net/bnx96/279
shaneparsons
43

Noch kürzer:

$('myform').submit(function() {
  return false;
});
user1017926
quelle
35
Aber dies verhindert auch das Klicken des Benutzers?
Haibuihoang
5
@haibuihoang Ja, dies deaktiviert die Formularübermittlung.
Tom
7
Sie sollten function(e) {e.preventDefault();}als Rückgabewerte verwenden, wenn Event-Handler veraltet sind: stackoverflow.com/a/20045473/601386
Grippe
6
@ user1111929 Das funktioniert gut, sollte aber nicht die beste Antwort sein, da die Frage nur nach Enterund nicht nach dem Deaktivieren der Formularübermittlung über die SubmitSchaltfläche gestellt wurde.
Daveslab
Eine häufige Situation, in der Sie die Formularübermittlung beibehalten, die Übermittlung jedoch durch Drücken der Eingabetaste deaktivieren möchten, besteht darin, dass Sie ein jQuery- onClickEreignis zum Überprüfen eines Formulars verwenden und dennoch mit jQuery senden. Mit anderen Worten, es gibt Fälle, in denen Sie nur über Javascript / jQuery senden möchten. Während Sie AJAX mit dieser Lösung weiterhin verwenden können, wird die Basisfunktionalität der submitMethode deaktiviert .
JRad the Bad
23
$('form').keyup(function(e) {
  return e.which !== 13  
});

Die event.which Eigenschaft normalisieren event.keyCode und event.charCode. Es wird empfohlen, event.which für die Tastatureingabe zu beobachten.

which docs.

Gdoron unterstützt Monica
quelle
14
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

Diese Lösung funktioniert auf allen Formularen auf der Website (auch auf mit Ajax eingefügten Formularen) und verhindert, dass nur Eingabetexte eingegeben werden. Legen Sie es in eine dokumentbereite Funktion und vergessen Sie dieses Problem ein Leben lang.

Buzogany Laszlo
quelle
9

Die meisten der oben genannten Antworten verhindern, dass Benutzer neue Zeilen in ein Textfeld einfügen. Wenn Sie dies vermeiden möchten, können Sie diesen speziellen Fall ausschließen, indem Sie überprüfen, welches Element derzeit den Fokus hat:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}
Jean-Baptiste
quelle
8

Der Overkill, jeden Tastendruck für die ENTER-Taste erfassen und testen zu müssen, nervt mich wirklich, sodass meine Lösung auf dem folgenden Browserverhalten beruht:

Durch Drücken von ENTER wird ein auslösen Klick Ereignis auf dem Submit - Button (getestet in IE11, Chrome 38, FF 31) ** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

Meine Lösung besteht also darin, die Standard-Senden-Schaltfläche (dh <input type="submit">) zu entfernen, damit das obige Verhalten fehlschlägt, da es keine Senden-Schaltfläche gibt, auf die Sie magisch klicken können, wenn Sie die EINGABETASTE drücken. Stattdessen verwende ich einen jQuery-Klick-Handler auf einer normalen Schaltfläche, um das Formular über die .submit()Methode von jQuery zu senden .

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

Demo: http://codepen.io/anon/pen/fxeyv?editors=101

** Dieses Verhalten ist nicht anwendbar, wenn das Formular nur 1 Eingabefeld enthält und dieses Feld eine Texteingabe ist. In diesem Fall wird das Formular mit der EINGABETASTE gesendet, auch wenn im HTML-Markup keine Schaltfläche zum Senden vorhanden ist (z. B. ein Suchfeld). Dies ist seit den 90er Jahren Standardverhalten des Browsers.

Costa
quelle
Ich habe ein unsichtbares Eingabefeld hinzugefügt, um dem Zähler "Formular wird nach EINGABETASTE gesendet" zuzuordnen, das durch "Das Formular hat nur 1 Eingabefeld und dieses Feld ist eine Texteingabe" verursacht wird.
Luo Jiong Hui
6

Wenn Sie nur die Schaltfläche "Senden bei Eingabe" und "Senden" deaktivieren möchten, verwenden Sie das Ereignis "Senden" des Formulars

<form onsubmit="return false;">

Sie können "return false" durch einen Aufruf der JS-Funktion ersetzen, die alles Notwendige tut, und das Formular als letzten Schritt senden.

Perica Zivkovic
quelle
1
Dadurch wird die gesamte Formularübermittlung deaktiviert, einschließlich des Klickens auf die Schaltfläche "Senden".
Nick
nicht 100% ... arbeiten Sie regelmäßig einen Schlüssel einreichen ... am besten verwenden Sie jquery, um zu verhindern
KingRider
Gute alternative Antwort (mit den oben genannten Einschränkungen), weil ... nun, manchmal ist dies alles, was Sie brauchen.
Emilys
Dies ist genau das, was ich für eine Situation brauchte, danke
Shababhsiddique
4

Sie können dies perfekt in reinem Javascript tun, einfach und ohne Bibliothek. Hier ist meine ausführliche Antwort auf ein ähnliches Thema: Deaktivieren der Eingabetaste für das Formular

Kurz gesagt, hier ist der Code:

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

Dieser Code soll verhindern, dass die Eingabetaste nur für den Eingabetyp = 'Text' verwendet wird. (Da der Besucher möglicherweise auf der gesamten Seite die Eingabetaste drücken muss.) Wenn Sie die Eingabetaste auch für andere Aktionen deaktivieren möchten, können Sie console.log (e) hinzufügen. Für Ihre Testzwecke und drücken Sie F12 in Chrome, gehen Sie zur Registerkarte "Konsole" und klicken Sie auf "Rücktaste" auf der Seite und schauen Sie hinein, um zu sehen, welche Werte zurückgegeben werden. Dann können Sie alle diese Parameter als Ziel festlegen, um den Code weiter zu verbessern oben, um Ihren Anforderungen für "e.target.nodeName" , "e.target.type" und viele mehr zu entsprechen ...

Tarik
quelle
2
Eigentlich sollte es so sein e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'. Mit dem angegebenen Code können Formulare gesendet werden, wenn ein Radio oder ein Kontrollkästchen aktiviert ist.
Afnpires
3

Ich weiß nicht, ob Sie dieses Problem bereits gelöst haben oder ob jemand versucht, es gerade zu lösen, aber hier ist meine Lösung dafür!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});
Don Marcony Neves
quelle
2

Die einfache Möglichkeit besteht darin, den Schaltflächentyp in HTML zu ändern und dann ein Ereignis in js ...

Änderung von diesem:

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

Zu

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

Und in js oder jquery hinzufügen:

("#btnSubmit").click(function () {
    $('#myForm').submit();
});
Zvi Redler
quelle
1

Der folgende Code verhindert, dass der Eingabeschlüssel zum Senden eines Formulars verwendet wird. Sie können den Eingabetaste jedoch weiterhin in einem Textbereich verwenden. Sie können es je nach Bedarf weiter bearbeiten.

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 
Rettich
quelle
1

Wenn Sie in Firefox bei der Eingabe die Eingabetaste drücken, wird die obere Form gesendet. Die Lösung finden Sie im Formular "Senden". Fügen Sie Folgendes hinzu:

<input type="submit" onclick="return false;" style="display:none" />
waten
quelle
1

3 Jahre später hat keine einzige Person diese Frage vollständig beantwortet.

Der Fragesteller möchte die Übermittlung des Standardformulars abbrechen und sein eigenes Ajax anrufen. Dies ist eine einfache Anfrage mit einer einfachen Lösung. Es ist nicht erforderlich, jedes in jede Eingabe eingegebene Zeichen abzufangen.

Das Formular unter der Annahme hat einen Submit - Button, ob ein <button id="save-form">oder <input id="save-form" type="submit">, tun:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});
derekm
quelle
-2

Wenn die Datei fertig ist (Laden abgeschlossen), erkennt das Skript jedes Ereignis für den Schlüssel "Eintrag" und deaktiviert das dahinter stehende Ereignis.

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>
McNavy
quelle
Fügen
@HaveNoDisplayName: Aktualisiert.
McNavy
-4

Komplettlösung in JavaScript für alle Browser

Der obige Code und die meisten Lösungen sind perfekt. Ich denke jedoch, dass die beliebteste "kurze Antwort" unvollständig ist.

Hier ist die gesamte Antwort. in JavaScript mit nativer Unterstützung für IE 7.

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

Diese Lösung verhindert nun, dass der Benutzer mit der Eingabetaste sendet, und lädt die Seite nicht neu oder führt Sie zum oberen Rand der Seite, wenn sich Ihr Formular irgendwo darunter befindet.

Tarandeep Singh
quelle
8
Dies verhindert auch, dass das Formular gesendet wird, wenn Sie auf die Schaltfläche "Senden" klicken.
Mario Werner
-10

Wie wäre es damit:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

Dies sollte alle Formulare mit Senden-Schaltflächen in Ihrer App deaktivieren.

Shreekar Patel
quelle