it-swarm.com.de

HTML5: Wie erstelle ich ein Formular, nachdem ich bei einer der Texteingaben die EINGABETASTE gedrückt habe?

Der Titel spricht für sich ... Ich habe ein paar Formulare, von denen eines nur ein einzelnes Texteingabeformular ist und das andere aus zwei Texteingaben besteht. Ich möchte keine Senden-Schaltfläche in einer von ihnen. Ich möchte, dass jedes Formular gesendet wird, wenn der Benutzer bei einer Texteingabe die EINGABE-Schaltfläche drückt:

  1. Das aus nur einer Eingabe zusammengesetzte Formular wird jedes Mal gesendet, wenn der Benutzer die EINGABETASTE drückt - Perfekt!
  2. Das zweite Formular, das aus zwei Texteingaben besteht, verhält sich nicht so und wird nicht gesendet, wenn der Benutzer bei einer der beiden Eingaben die EINGABETASTE drückt.

Gibt es eine Möglichkeit, ein Formular mit mehr als einer Texteingabe so zu verhalten und zu vermeiden, dass ein Submit-Button enthalten ist? ?

35
charliebrownie

Versuchen Sie dies zwischen dem <form></form> Stichworte

<input type="submit" style="display: none" />

Getestet und es funktioniert auf Firefox und Chrome. Wenn Sie einen Eingabetyp zum Senden im Formular haben, enter sollte es automatisch einreichen, unabhängig davon, ob es sichtbar ist oder nicht.


Ich benutze dies selbst in einem Anmeldeformular, obwohl es im Feld Benutzername sinnvoller ist, zum nächsten Feld zu wechseln, als es zu übermitteln. Nur für den Fall, dass Sie einen ähnlichen Anwendungsfall haben, ist hier der Code, den ich verwendet habe (erfordert jQuery)

$('#username').keypress(function(event) {
    if (event.keyCode == 13 || event.which == 13) {
        $('#password').focus();
        event.preventDefault();
    }
});

Beachten Sie jedoch, dass es einen kleinen Fehler gibt - wenn der Benutzer einen Benutzernamen für die automatische Vervollständigung des Browsers auswählt und auf drückt enterwechselt es immer noch zum nächsten Feld, anstatt es auszuwählen. Ich hatte keine Zeit, dies zu debuggen, aber wenn jemand herausfinden kann, wie man es behebt, wäre das cool.

41
user193130

Ich habe nach einer Lösung für dieses Problem gesucht und möchte meine Lösung anhand vieler Posts hier teilen. (Getestet auf modernem Chrome/Firefox/IE)

Wenn Sie also nur Javascript verwenden, sendet der folgende Code das Formular, wenn die EINGABETASTE gedrückt wird beliebiges Feld oder wenn die Schaltfläche Submit gedrückt wird. Danach wird das Formular gelöscht/zurückgesetzt, was eine nette Sache ist.

Ich hoffe es hilft.

<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>

<div onKeyPress="return myFunction(event)">
  <form id="form01" action="demo_form.asp" onsubmit="return false;" >
    Enter name: <input type="text" name="fname">
    <input type="button" value="Submit" onclick="myFunction(0)">
  </form>
</div>

<script>
function myFunction(e) {
   if((e && e.keyCode == 13) || e == 0) {
     alert("The form was submitted");
     document.forms.form01.submit();
     document.forms.form01.fname.value = ""; // could be form01.reset as well
   }
}
</script>

</body>
</html>
2
user3058813

Sie müssen nach dem Drücken der Eingabetaste suchen. Dieser Beitrag hier zeigt, wie das geht. Tastendruckereignis in JavaScript eingeben

2
Jeremiah Jessel

Stellen Sie sicher, dass sich Ihre Eingaben im Element "form" befinden, und geben Sie dem Element "form" das Attribut "action".

2
Ahmadbaba46