it-swarm.com.de

jQuery deaktivieren Formular senden bei der Eingabe

Ich habe das folgende Javascript auf meiner Seite, das anscheinend nicht funktioniert.

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

Ich möchte das Absenden des Formulars bei der Eingabe deaktivieren, oder besser noch, mein Ajax-Formular beim Absenden aufrufen. Beide Lösungen sind akzeptabel, aber der oben aufgeführte Code verhindert nicht, dass das Formular gesendet wird.

196
Adam Levitt

Wenn keyCode nicht abgefangen wird, fange which:

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

BEARBEITEN: habe es verpasst, es ist besser, keyup anstelle von keypress zu verwenden

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

EDIT 3: bind() in on() geändert

399
zessx

Normalerweise wird das Formular am gesendet Enter wenn Sie sich auf Eingabeelemente konzentrieren.

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

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

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

59
VisioN

Noch kürzer:

$('myform').submit(function() {
  return false;
});
43
user1017926
$('form').keyup(function(e) {
  return e.which !== 13  
});

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

which docs.

23
gdoron
$(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 Formularen, die mit Ajax eingefügt wurden) und verhindert, dass nur Eingaben in Eingabetexte erfolgen. Legen Sie es in eine dokumentenfertige Funktion und vergessen Sie dieses Problem ein Leben lang.

14
Buzogany Laszlo

Der Overkill, jeden Tastendruck für die EINGABETASTE erfassen und testen zu müssen, nervt mich wirklich. Meine Lösung beruht also auf dem folgenden Browserverhalten:

Durch Drücken der EINGABETASTE wird ein Ereignis Klick auf der Senden-Schaltfläche ausgelöst (getestet in IE11, Chrome 38, FF 31) ** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

Daher besteht meine Lösung darin, die Standard-Senden-Schaltfläche (d. H. <input type="submit">) Zu entfernen, sodass das oben beschriebene Verhalten fehlschlägt, da beim Drücken der EINGABETASTE keine Senden-Schaltfläche zum magischen Klicken vorhanden ist. Stattdessen verwende ich einen jQuery-Klick-Handler für eine normale Schaltfläche, um das Formular über die Methode .submit() 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 Senden-Schaltfläche vorhanden ist (z. B. ein Suchfeld). Dies ist seit den 90er Jahren das Standardverhalten von Browsern.

7
Costa

Die meisten Antworten oben hindern Benutzer daran, neue Zeilen in ein Textfeld einzufügen. Wenn Sie dies vermeiden möchten, können Sie diesen speziellen Fall ausschließen, indem Sie prüfen, welches Element derzeit den Fokus hat:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}
6
jean-baptiste

wenn Sie nur das Senden bei der Eingabe und die Senden-Schaltfläche deaktivieren möchten, verwenden Sie das Ereignis onsubmit des Formulars

<form onsubmit="return false;">

Sie können "return false" durch einen Aufruf der JS-Funktion ersetzen, die alle erforderlichen Aktionen ausführt und das Formular als letzten Schritt sendet.

4
Perica Zivkovic

Sie können dies perfekt in reinem Javascript, einfach und ohne Bibliothek tun. Hier ist meine ausführliche Antwort für 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>

Mit diesem Code soll verhindert werden, dass die Eingabetaste nur für den Eingabetyp "Text" verwendet wird. (Da der Besucher möglicherweise 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 drücken Sie F12 in Chrom, gehen Sie zur Registerkarte "Konsole" und drücken Sie die Rücktaste auf der Seite, um zu sehen, welche Werte zurückgegeben werden. Anschließend können Sie alle diese Parameter gezielt verwenden, um den Code weiter zu verbessern oben entsprechend Ihren Anforderungen für "e.target.nodeName", "e.target.type" und viele mehr ...

4
Tarik

Ich weiß nicht, ob Sie dieses Problem bereits lösen 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;
    }
});
3

Wenn Sie in Firefox bei der Eingabe die Eingabetaste drücken, wird die obere Form übermittelt. Die Lösung befindet sich im Formular "Wird eingereicht". Fügen Sie Folgendes hinzu:

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

3 Jahre später und keine einzige Person hat 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 die einzelnen Eingaben eingegebene Zeichen abzufangen.

Angenommen, das Formular hat eine Senden-Schaltfläche, ob ein <button id="save-form"> oder ein <input id="save-form" type="submit">, machen:

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

Mit dem folgenden Code wird die Verwendung der Eingabetaste zum Senden eines Formulars negiert, Sie können die 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> 
1
Radish

Die einfache Möglichkeit besteht darin, die Art der Schaltfläche in HTML zu ändern und dann ein Ereignis in js hinzuzufügen.

Ändern Sie daraus:

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