Verhindern Sie, dass Benutzer ein Formular senden, indem Sie die Eingabetaste drücken

Ich habe eine Umfrage auf einer Website und es scheint einige Probleme mit den Benutzern zu geben, die die Eingabetaste drücken (ich weiß nicht warum) und versehentlich die Umfrage (Formular) senden, ohne auf die Schaltfläche "Senden" zu klicken. Gibt es eine Möglichkeit, dies zu verhindern?

Ich verwende HTML, PHP 5.2.9 und jQuery für die Umfrage.

Sie können eine Methode wie verwenden

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

EnterWenn Sie die Kommentare zum Originalbeitrag lesen, um ihn benutzerfreundlicher zu gestalten und den Benutzern das Drücken zu ermöglichen, wenn sie alle Felder ausgefüllt haben:

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

Geben Sie die Eingabetaste an keiner Stelle ein

Wenn Sie keine <textarea>in Ihrem Formular haben, fügen Sie einfach Folgendes zu Ihrem hinzu <form>:

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

Oder mit jQuery:

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

Dies führt dazu, dass jeder Tastendruck im Formular auf dem überprüft wird key. Wenn dies nicht der Fall ist Enter, wird es zurückkehren trueund alles wird wie gewohnt fortgesetzt. Wenn dies der Fall ist Enter, wird es zurückgegeben falseund alles wird sofort gestoppt, sodass das Formular nicht gesendet wird.

Die keydownVeranstaltung wird der Veranstaltung vorgezogen, keyupda keyupes zu spät ist, die Formularübermittlung zu blockieren. Historisch gab es auch die keypress, aber diese ist veraltet, ebenso wie die KeyboardEvent.keyCode. Sie sollten KeyboardEvent.keystattdessen verwenden, was den Namen der gedrückten Taste zurückgibt. Wenn Enterdiese Option aktiviert ist, werden sowohl 13 (normale Eingabe) als auch 108 (Numpad-Eingabe) überprüft.

Beachten Sie, dass, $(window)wie in einigen anderen Antworten vorgeschlagen, $(document)nicht für keydown/ keyupin IE <= 8 funktioniert. Dies ist also keine gute Wahl, wenn Sie auch diese armen Benutzer abdecken möchten.

Eingabetaste nur in Textbereichen zulassen

Wenn Sie eine <textarea>in Ihrem Formular haben (die natürlich die Eingabetaste akzeptieren sollte ), fügen Sie den Keydown-Handler zu jedem einzelnen Eingabeelement hinzu, das keine ist <textarea>.

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

Um die Boilerplate zu reduzieren, ist dies besser mit jQuery zu tun:

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

Wenn an diese Eingabeelemente andere Ereignishandlerfunktionen angehängt sind, die Sie aus irgendeinem Grund auch bei der Eingabetaste aufrufen möchten, verhindern Sie nur das Standardverhalten des Ereignisses, anstatt false zurückzugeben, damit es ordnungsgemäß an andere Handler weitergegeben werden kann.

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

Lassen Sie die Eingabetaste in Textbereichen zu und senden Sie nur Schaltflächen

Wenn Sie die Eingabetaste auch für die Senden-Schaltflächen zulassen möchten <input|button type="submit">, können Sie die Auswahl jederzeit wie folgt verfeinern.

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

Beachten Sie, dass, input[type=text]wie in einigen anderen Antworten vorgeschlagen, diese HTML5-Nicht-Texteingaben nicht behandelt werden. Dies ist also keine gute Auswahl.

In Abschnitt 4.10.22.2 Implizite Übermittlung der W3C-HTML5-Spezifikation heißt es:

formDie Standardschaltfläche eines Elements ist die erste Übermittlungsschaltfläche in der Baumreihenfolge, deren Formularbesitzer dieses formElement ist.

Wenn der Benutzeragent unterstützt, dass der Benutzer ein Formular implizit senden kann (z. B. wenn auf einigen Plattformen die Eingabetaste gedrückt wird, während ein Textfeld fokussiert ist, wird das Formular implizit gesendet), gilt dies für ein Formular, dessen Standardschaltfläche eine definierte Aktivierung aufweist Das Verhalten muss dazu führen, dass der Benutzeragent Schritte zur Aktivierung synthetischer Klicks auf dieser Standardschaltfläche ausführt .

Hinweis: Wenn die Standardschaltfläche deaktiviert ist, wird das Formular nicht gesendet, wenn ein solcher impliziter Übermittlungsmechanismus verwendet wird. (Eine Schaltfläche hat kein Aktivierungsverhalten, wenn sie deaktiviert ist.)

Eine standardkonforme Möglichkeit zum Deaktivieren der impliziten Übermittlung des Formulars besteht daher darin, eine deaktivierte Übermittlungsschaltfläche als erste Übermittlungsschaltfläche im Formular zu platzieren:

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

Ein schönes Merkmal dieses Ansatzes ist, dass er ohne JavaScript funktioniert . Unabhängig davon, ob JavaScript aktiviert ist oder nicht, ist ein standardkonformer Webbrowser erforderlich, um die implizite Übermittlung von Formularen zu verhindern.

Ich musste alle drei Ereignisse im Zusammenhang mit dem Drücken von Tasten abfangen, um zu verhindern, dass das Formular gesendet wurde:

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

Sie können all das zu einer schönen kompakten Version kombinieren:

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

Wenn Sie ein Skript verwenden, um die eigentliche Übermittlung durchzuführen, können Sie dem Onsubmit-Handler die folgende Zeile "return false" hinzufügen:

<form onsubmit="return false;">

Das Aufrufen von submit () im Formular über JavaScript löst das Ereignis nicht aus.

Verwenden:

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

Diese Lösung funktioniert auf allen Formularen auf einer Website (auch auf mit Ajax eingefügten Formularen) und verhindert nur Enters in Eingabetexten. Platzieren Sie es in einer dokumentenbereiten Funktion und vergessen Sie dieses Problem ein Leben lang.

Anstatt zu verhindern, dass Benutzer drücken Enter, was unnatürlich erscheint, können Sie das Formular unverändert lassen und eine zusätzliche clientseitige Validierung hinzufügen: Wenn die Umfrage nicht abgeschlossen ist, wird das Ergebnis nicht an den Server gesendet und der Benutzer erhält eine nette Nachricht Was muss ausgefüllt werden, um das Formular auszufüllen? Wenn Sie jQuery verwenden, versuchen Sie es mit dem Validierungs-Plugin:

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

Dies erfordert mehr Arbeit als das Abfangen der EnterSchaltfläche, bietet aber sicherlich eine umfassendere Benutzererfahrung.

Eine schöne einfache kleine jQuery-Lösung:

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

Ich kann noch keinen Kommentar abgeben, daher werde ich eine neue Antwort veröffentlichen

Die akzeptierte Antwort ist in Ordnung, aber sie hat das Senden bei der Eingabe des Nummernblocks nicht gestoppt. Zumindest in der aktuellen Version von Chrome. Ich musste die Keycode-Bedingung ändern, dann funktioniert es.

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

Es ist meine Lösung, um das Ziel zu erreichen, es ist sauber und effektiv.

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

Ein ganz anderer Ansatz:

1. Der erste <button type="submit">im Formular wird beim Drücken aktiviert Enter.
2. Dies gilt auch dann, wenn die Schaltfläche mit ausgeblendet ist style="display:none;
3. Das Skript für diese Schaltfläche kann zurückgegeben werden false, wodurch der Übermittlungsprozess abgebrochen wird.
4. Sie können <button type=submit>das Formular noch von einem anderen senden lassen. Kehren Sie einfach zurück, trueum die Einreichung zu kaskadieren.
5. Durch Drücken, Enterwährend die reale Senden-Taste fokussiert ist, wird die echte Senden-Schaltfläche aktiviert.
6. Das Drücken Enterinnerhalb <textarea>oder anderer Formularsteuerelemente verhält sich wie gewohnt.
7. Durch Drücken Enterinnerhalb <input>Formularsteuer löst der erste <button type=submit>, der zurückkehrt false, und damit nichts passiert.

Somit:

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

Geben Sie der Form eine Aktion von 'Javascript: void (0);' scheint den Trick zu tun

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

Das Nicht-Setzen eines Submit-Buttons könnte reichen. Fügen Sie einfach ein Skript in die Eingabe ein (Typ = Schaltfläche) oder fügen Sie eventListener hinzu, wenn Sie möchten, dass die Daten im Formular gesendet werden.

Verwenden Sie dies lieber

<input type="button">

als dies zu verwenden

<input type="submit">

1. Verwenden Sie nicht type = "submit" für Eingaben oder Schaltflächen.
2. Verwenden Sie type = "button" und verwenden Sie js [Jquery / angle / etc], um das Formular an den Server zu senden.

Ich musste verhindern, dass nur bestimmte Eingaben gesendet wurden, daher habe ich einen Klassenselektor verwendet, damit dies eine "globale" Funktion ist, wo immer ich sie benötige.

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

Und dieser jQuery-Code:

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

Alternativ, wenn der Keydown nicht ausreicht:

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

Einige Notizen:

Wenn Sie hier verschiedene gute Antworten ändern, Enterscheint der Schlüssel für keydownalle Browser zu funktionieren . Für die Alternative habe ich bind()auf die on()Methode aktualisiert .

Ich bin ein großer Fan von Klassenselektoren, die alle Vor- und Nachteile sowie Leistungsdiskussionen abwägen. Meine Namenskonvention lautet "idSomething", um anzuzeigen, dass jQuery sie als ID verwendet, um sie vom CSS-Stil zu trennen.

Sie können eine JavaScript-Methode erstellen, um zu überprüfen, ob der EnterSchlüssel gedrückt wurde, und um die Übermittlung zu stoppen.

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

Rufen Sie das einfach bei der Submit-Methode auf.

NUR BLOCK SUBMIT, aber keine andere wichtige Funktion der Eingabetaste, z. B. das Erstellen eines neuen Absatzes in einem <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>

Dies ist der perfekte Weg. Sie werden nicht von Ihrer Seite weitergeleitet

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

Ich hatte ein ähnliches Problem, bei dem ich ein Raster mit "Ajax-Textfeldern" (Yii CGridView) und nur einer Senden-Schaltfläche hatte. Jedes Mal, wenn ich in einem Textfeld gesucht und das übermittelte Formular eingegeben habe. Ich musste etwas mit der Schaltfläche tun, da dies die einzige gemeinsame Schaltfläche zwischen den Ansichten war (MVC-Muster). Alles was ich tun musste war entfernen type="submit"und setzenonclick="document.forms[0].submit()

Ich denke, es ist mit allen Antworten gut abgedeckt, aber wenn Sie eine Schaltfläche mit einem JavaScript-Validierungscode verwenden, können Sie einfach den Onkeypress des Formulars für Enter festlegen, um Ihre Übermittlung wie erwartet aufzurufen:

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

Der Onkeypress JS könnte alles sein, was Sie tun müssen. Es besteht keine Notwendigkeit für eine größere globale Veränderung. Dies gilt insbesondere dann, wenn Sie nicht derjenige sind, der die App von Grund auf neu codiert, und Sie dazu gebracht wurden, die Website eines anderen zu reparieren, ohne sie auseinander zu reißen und erneut zu testen.

Hier gibt es bereits viele gute Antworten. Ich möchte nur etwas aus UX-Sicht beitragen. Tastatursteuerungen in Formularen sind sehr wichtig.

Die Frage ist, wie die Übermittlung beim Tastendruck deaktiviert werden kann Enter. Nicht, wie man Enterin einer gesamten Anwendung ignoriert . Ziehen Sie daher in Betracht, den Handler an ein Formularelement anzuhängen, nicht an das Fenster.

Das Deaktivieren Enterfür das Senden von Formularen sollte weiterhin Folgendes ermöglichen:

1. Formularübermittlung über, Enterwenn die Schaltfläche "Senden" fokussiert ist.
2. Formularübermittlung, wenn alle Felder ausgefüllt sind.
3. Interaktion mit nicht gesendeten Schaltflächen über Enter.

Dies ist nur eine Kesselplatte, aber es folgt allen drei Bedingungen.

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

Etwas, das ich hier nicht beantwortet gesehen habe: Wenn Sie durch die Elemente auf der Seite Enterblättern , wird durch Drücken der Schaltfläche "Senden" der Onsubmit-Handler im Formular ausgelöst, das Ereignis wird jedoch als MouseEvent aufgezeichnet. Hier ist meine kurze Lösung, um die meisten Grundlagen abzudecken:

Dies ist keine jQuery-bezogene Antwort

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

So finden Sie ein funktionierendes Beispiel: https://jsfiddle.net/nemesarial/6rhogva2/

In meinem speziellen Fall musste ich ENTER daran hindern, das Formular zu senden, und auch das Klicken auf die Schaltfläche "Senden" simulieren. Dies liegt daran, dass auf der Schaltfläche "Senden" ein Klick-Handler vorhanden war, da wir uns in einem modalen Fenster befanden (geerbter alter Code). In jedem Fall sind hier meine Kombinationslösungen für diesen Fall.

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

Dieser Anwendungsfall ist besonders nützlich für Benutzer von IE8.

Das funktioniert bei mir

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

Ich möchte einen kleinen CoffeeScript-Code hinzufügen (nicht vor Ort getestet):

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

(Ich hoffe, Ihnen gefällt der nette Trick in der Klausel "Es sei denn".)

Verwenden von Javascript (ohne ein Eingabefeld zu überprüfen):

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

Wenn jemand dies auf bestimmte Felder anwenden möchte, z. B. Text vom Typ Eingabe:

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

Das funktioniert in meinem Fall gut.

Gehen Sie in Ihr CSS und fügen Sie es hinzu. Dann wird die Übermittlung Ihres Formulars automatisch blockiert, solange Sie Eingaben übermittelt haben. Wenn Sie dies nicht mehr möchten, können Sie es löschen oder eingeben activateund deactivatestattdessen

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

Sie können auch javascript:void(0)das Senden von Formularen verhindern.

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

Dies hat bei mir in allen Browsern nach viel Frust mit anderen Lösungen funktioniert. Die äußere Funktion name_space dient nur dazu, sich von der Deklaration von Globals fernzuhalten, was ich ebenfalls empfehle.

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

Beispielverwendung:

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

Verwenden:

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