Warum werden Formulare mit einem einzelnen Eingabefeld beim Drücken der Eingabetaste gesendet?

Question 1

Warum lädt a <form>mit einem einzelnen <input>Feld das Formular neu, wenn der Benutzer einen Wert eingibt und die Taste drückt Enter, und dies nicht, wenn das Feld zwei oder mehr Felder enthält <form>?

Ich habe eine einfache Seite geschrieben , um diese Kuriosität zu testen.

Wenn Sie im zweiten Formular einen Wert eingeben und die Eingabetaste drücken, wird die Seite, die den eingegebenen Wert übergibt, neu geladen, als hätten Sie aufgerufen GET. Warum? und wie vermeide ich das?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
  <input type="text" name="partid2" id="partid2" />
  <input type="text" name="partdesc" id="partdesc"  />
</form>
  <p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid"  />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>

Question 2

Dies ist ein wenig bekannter "Quirk", der schon eine Weile nicht mehr da ist. Ich weiß, dass einige Leute es auf verschiedene Weise gelöst haben.

Der einfachste Bypass ist meiner Meinung nach, einfach eine zweite Eingabe zu haben, die dem Benutzer nicht angezeigt wird. Zugegeben, nicht allzu benutzerfreundlich im Backend, es funktioniert, um das Problem zu beheben.

Ich sollte beachten, dass der häufigste Ort, an dem ich von diesem Problem höre, speziell mit dem Internet Explorer und nicht mit FireFox oder anderen ist. Obwohl es sie auch zu beeinflussen scheint.

Question 3

Dies ist ein bekannter Fehler in IE6 / 7/8 . Es scheint nicht, dass Sie eine Lösung dafür bekommen.

Die beste Problemumgehung, die Sie dafür tun können, besteht darin, ein weiteres verstecktes Feld hinzuzufügen (sofern Ihr technisches Gewissen dies zulässt). Der IE sendet ein Formular nicht mehr automatisch, wenn er feststellt, dass das Formular zwei Eingabefelder enthält.

Aktualisieren

Falls Sie sich gefragt haben, warum dies der Fall ist, stammt dieses Juwel direkt aus der HTML 2.0-Spezifikation (Abschnitt 8.2) :

Wenn ein Formular nur ein einzeiliges Texteingabefeld enthält, sollte der Benutzeragent die Eingabe in dieses Feld als Anforderung zum Senden des Formulars akzeptieren.

Question 4

Nein, das Standardverhalten ist, dass bei der Eingabe die letzte Eingabe im Formular gesendet wird. Wenn Sie überhaupt nicht einreichen möchten, können Sie hinzufügen:

<form onsubmit="return false;">

Oder in Ihrer Eingabe

<input ... onkeypress="return event.keyCode != 13;">

Natürlich gibt es schönere Lösungen, aber diese sind ohne Bibliothek oder Framework einfacher.

Question 5

Das Drücken der Eingabetaste funktioniert unterschiedlich, je nachdem, (a) wie viele Felder vorhanden sind und (b) wie viele Senden-Schaltflächen vorhanden sind. Es kann nichts tun, es kann das Formular ohne "erfolgreiche" Senden-Schaltfläche senden oder es kann so tun, als ob die erste Senden-Schaltfläche angeklickt wurde (sogar einen Klick dafür generieren!) Und mit dem Wert dieser Schaltfläche senden.

Wenn Sie beispielsweise input type="submit"Ihrem Formular mit zwei Feldern ein Formular hinzufügen , werden Sie feststellen, dass es auch gesendet wird.

Dies ist eine uralte Browser-Eigenart, die mindestens bis zum frühen Netscape (vielleicht weiter) zurückreicht und wahrscheinlich jetzt nicht geändert wird.

<form>

Ungültig ohne 'Aktion'. Wenn Sie nicht beabsichtigen, irgendwo etwas zu senden, und Sie keine Gruppierung von Optionsfeldnamen benötigen, können Sie das Formularelement einfach ganz weglassen.

Question 6

Hier ist der Code, mit dem ich das Problem gelöst habe:

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>

Question 7

Es wird nicht die Seite als solche neu geladen, sondern das Formular gesendet.

In diesem Beispiel jedoch, weil Sie kein Aktionsattribut für das Formular haben, das es an sich selbst sendet, was den Eindruck erweckt, die Seite neu zu laden.

Außerdem kann ich das von Ihnen beschriebene Verhalten nicht wiederholen. Wenn ich in einer Texteingabe in einem Formular bin und die Eingabetaste drücke, wird das Formular gesendet, unabhängig davon, wo sich die Eingabe im Formular befindet oder wie viele Eingaben es gibt.

Vielleicht möchten Sie dies in verschiedenen Browsern ausprobieren.

Question 8

Wie bereits erwähnt, basiert dies auf der HTML 2.0-Spezifikation:

So verhindern Sie dies, ohne Ihre URLs zu vermasseln:

<form>
    <input type="text" name="partid" id="partid"  />
    <input type="text" style="display: none;" />
</form>

Question 9

Vielen Dank an alle, die geantwortet haben. Es ist ein Augenöffner, dass ein Formular mit einem einzelnen Feld anders funktioniert als ein Formular mit vielen Feldern.

Eine andere Möglichkeit, mit dieser automatischen Übermittlung umzugehen, besteht darin, eine Übermittlungsfunktion zu codieren, die false zurückgibt.

In meinem Fall hatte ich eine Schaltfläche mit einem Onclick-Ereignis, daher habe ich den Funktionsaufruf mit dem hinzugefügten returnSchlüsselwort in das Onsubmit-Ereignis verschoben. Wenn die aufgerufene Funktion false zurückgibt, erfolgt die Übermittlung nicht.

<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid"  />
<input type="submit" value="Find Part" />
</form

function ajaxMagic() {
  ...
  return (false);
}

Question 10

Die Lösung, die ich für alle von mir getesteten Browser (IE, FF, Chrome, Safari, Opera) gefunden habe, besteht darin, dass das erste Eingabeelement type=submitim Formular sichtbar und das erste Element im Formular sein muss. Ich konnte die CSS-Platzierung verwenden, um die Senden-Schaltfläche an den unteren Rand der Seite zu verschieben, und dies hatte keinen Einfluss auf die Ergebnisse!

<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
                      style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
     ...... lots of other input tags, etc...
</form>

Question 11

Dieses Problem tritt sowohl im Internet Explorer als auch in Chrome auf. Es tritt in Firefox nicht auf. Eine einfache Lösung wäre, dem Formular-Tag das folgende Attribut hinzuzufügen: onsubmit = "return false"

Dies setzt natürlich voraus, dass Sie das Formular mit einem XMLHttpRequest-Objekt senden.

Question 12

Ja, Formular mit einem einzelnen inputText-Feld, das in HTML 4
anders funktioniert. OnSubmit return false funktioniert bei mir nicht, aber der folgende Fehler funktioniert einwandfrei

<!--Fix  IE6/7/8 and  HTML 4 bug -->
    <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />

Question 13

Ich habe dies mit dem folgenden Code behandelt, bin mir aber nicht sicher, ob dies ein guter Ansatz ist. Durch Suchen nach Eingabefeldern in einem bestimmten Formular und wenn es 1 ist, verhindern Sie die Standardaktion.

 if($j("form#your-form input[type='text']").length == 1) {
   $j(this).bind("keypress", function(event) {
     if(event.which == 13) {
       event.preventDefault();
     }
   });
 }

Question 14

Ich denke, das ist eine Funktion, die ich aber auch deaktiviert habe. Es ist nicht sehr aufwendig, es zu deaktivieren. Erfassen Sie einfach die Eingabetaste, ignorieren Sie sie.