Wie man die “Enter”-Taste in einem Textfeld macht, um ein Formular zu senden

Lesezeit: 6 Minuten

Benutzer-Avatar
Ingrid

Ich habe einen Chat, der aus offensichtlichen Gründen Textarea anstelle von Text verwendet. Aus diesem Grund erhalten Mitglieder jedes Mal, wenn sie die EINGABETASTE drücken, eine neue Zeile, anstatt die Nachricht zu senden. Ich möchte dies ändern, also jedes Mal, wenn sie ENTER drücken = die Nachricht, die gesendet werden soll, und dann den Cursor, um zum Textbereich zurückzukehren, um die nächste Nachricht einzugeben. Ich habe verschiedene Codes auf dieser Seite ausprobiert, die meisten funktionierten nicht und diejenigen, die etwas zu tun schienen, aktualisierten nur die Seite und ich bekam eine leere Seite.

Mein Code:

<form name="message" action="">
    <textarea name="usermsg" autocomplete="off" type="text" id="usermsg" rows="4" cols="30" style="width: 450px; margin-left: 25px;">
    </textarea>
    <br/>

    <p style="margin-left: 420px;"><input name="submitmsg" type="submit"  id="submitmsg" value="Send" /></p>
</form>

Vielen Dank für Ihre Zeit.

  • Von welcher Programmiersprache redest du? HTML?

    – gorootde

    19. Januar 2012 um 22:09 Uhr

  • PHP ist die Programmiersprache.

    – Ingrid

    19. Januar 2012 um 22:14 Uhr

  • Vielleicht, weil Sie zu lange Texte eingeben <input type="text">Text wird nicht wie in Textarea umbrochen.

    – Peter Krejci

    19. Januar 2012 um 22:16 Uhr


  • Programmiersprache sollte hier irrelevant sein, da dies eine clientseitige Anfrage ist.

    – Kai Qing

    19. Januar 2012 um 22:16 Uhr

  • Ähm … Ich werde etwas über Textboxen lesen und sehen, worum es geht. Vielen Dank.

    – Ingrid

    19. Januar 2012 um 22:17 Uhr

Benutzer-Avatar
Sergio Cabral

Versuchen Sie dies (beachten Sie, dass das Drücken von Eintreten einreicht, und Umschalt+Eingabe fügt eine neue Zeile hinzu).

$("#textareaId").keypress(function (e) {
    if(e.which === 13 && !e.shiftKey) {
        e.preventDefault();
    
        $(this).closest("form").submit();
    }
});

  • Es ist lange her, dass ich dieses Beispiel geschrieben habe. Aber der Grund für die Rückgabe von „false“ besteht darin, die Ereignisweitergabe zu verhindern (genau wie bei e.preventDefault ()). Vielleicht ist es unnötig, aber ich erinnere mich nicht. Also testen,

    – Sergio Cabral

    21. Juli 2018 um 1:58 Uhr

  • Das Drücken der Eingabetaste scheint das Formular zu senden (zumindest wird das Formular geschlossen), aber der Inhalt des Textbereichs wird nicht gespeichert.

    – msutopico

    29. Oktober 2019 um 16:28 Uhr

  • @SergioCabral mit e.preventDefault (); ist hilfreich, da nach dem Drücken der Eingabetaste nur JS gestartet wird, ohne dem Textbereich eine neue Zeile hinzuzufügen.

    – Jakob Adamec

    15. Februar 2021 um 7:37 Uhr

Benutzer-Avatar
Dimitar Nestorow

Vanille-JavaScript-Lösung

function submitOnEnter(event){
    if(event.which === 13){
        event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
        event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
    }
}

document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);

Wenn Sie es vorziehen, nicht zu senden, wenn auf Shift geklickt wird, müssen Sie nur Zeile 2 ändern in:

if(event.which === 13 && !event.shiftKey){

Um den Textbereich zu leeren, fügen Sie dies einfach in den Körper der if-Anweisung ein

event.target.value = "";

Um dies mit Internet Explorer 11 zu verwenden, ändern Sie Zeile 3 in:

var newEvent = document.createEvent("Event");
newEvent.initEvent("submit", false, true);
event.target.form.dispatchEvent(newEvent);

Aber warte? Warum nicht verwenden event.target.form.submit();?

Wenn Sie die Submit-Methode des Formulars aufrufen, werden die Ereignis-Listener nicht aufgerufen.


Demo:

function submitOnEnter(event){
    if(event.which === 13){
        event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
        event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
    }
}

document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);

document.getElementById("form").addEventListener("submit", (event) => {
    event.preventDefault();
    console.log("form submitted");
});
<form id="form">
    <textarea id="usermsg"></textarea>
    <button type="Submit">Submit</button>
</form>

  • bitte beachte, dass new Event() funktioniert nicht in IE11

    – ptsky

    28. April 2019 um 19:53 Uhr

  • @pttsky hat einen Hinweis zu IE 11 hinzugefügt

    – Dimitar Nestorow

    29. April 2019 um 18:08 Uhr

  • Daumen hoch für Vanille. Wer will schon jQuery?

    – Kalsal

    30. September 2019 um 13:00 Uhr

Ich habe eine jsfiddle mit einem Beispiel erstellt, wie man es mit jQuery und dem macht keypressFunktion u which Eigentum: http://jsfiddle.net/GcdUE/

Ich bin mir nicht sicher, wonach Sie mehr fragen, also spezifizieren Sie Ihre Frage bitte, wenn möglich, weiter.

$(function() {
    $("#usermsg").keypress(function (e) {
        if(e.which == 13) {
            //submit form via ajax, this is not JS but server side scripting so not showing here
            $("#chatbox").append($(this).val() + "<br/>");
            $(this).val("");
            e.preventDefault();
        }
    });
});

  • Anders, das funktioniert, aber die Nachricht bleibt nur eine Sekunde lang und verschwindet dann aus dem Chat.

    – Ingrid

    19. Januar 2012 um 22:34 Uhr

  • Ok, ich habe etwas bearbeitet, damit es zu meinem Chat passt, und Ihr Code funktioniert jetzt perfekt. Vielen Dank an alle, Sie waren sehr nett!

    – Ingrid

    20. Januar 2012 um 1:35 Uhr

  • Ist gut, aber ist besser, wenn ändern [ if (e.which == 13) { ] zu [ if(e.which == 13 && !e.shiftKey) { ] ////// Auf diese Weise können wir SHIFT+ENTER in eine neue Zeile eingeben.

    – Sergio Cabral

    4. April 2016 um 22:15 Uhr


Benutzer-Avatar
Kai Qing

Angenommen, Sie würden jquery verwenden, wäre dies ein einfacher Listener für Ihr Eingabefeld:

In Ihrer Fußzeile vor :

<script type="text/javascript">
$(document).ready(function(){
    $('#usermsg').keypress(function(e){
      if(e.which == 13){
           // submit via ajax or
           $('form').submit();
       }
    });
});
</script>

Fügen Sie in Ihrem HTML-Kopf Folgendes hinzu:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> 

aber wenn js oder jquery nicht in Frage kommen, aktualisieren Sie vielleicht Ihre Frage, um sie ausdrücklich auszuschließen.

Benutzer-Avatar
Eric Dienot

function KP()
{    
var x = event.keyCode;
   if(x==13)
        {
            // alert (x);
            document.message.submit();
        }
}

php

echo '<textarea  name="usrMsg" id="usrMsg" OnKeyPress="KP();">'txt'</textarea>';

  • Bitte überlegen Sie, was Sie tun.

    – Spektr

    4. Oktober 2020 um 21:42 Uhr

  • Während dies das Formular abschickt, fügt es in einigen Browsern auch einen Zeilenvorschub in das SELECT-Feld ein, was Sie nicht möchten, wenn das Formular an Ort und Stelle bleibt. Um das Problem zu beheben, lassen Sie die Funktion „false“ für Enter zurückgeben und geben Sie „return KP();“ ein. im Anrufer. Ähnliche Beispiele finden Sie unter stackoverflow.com/questions/3059559/…

    – FloverOwe

    12. Mai 2021 um 19:46 Uhr


Benutzer-Avatar
Jukka K. Korpela

Verwenden <input type=text> Anstatt von <textarea>. Dann hast du deutlich bessere Chancen. Im textareadas Drücken der Eingabetaste soll einen Zeilenumbruch im Text bedeuten, nicht das Senden von Text.

  • Bitte überlegen Sie, was Sie tun.

    – Spektr

    4. Oktober 2020 um 21:42 Uhr

  • Während dies das Formular abschickt, fügt es in einigen Browsern auch einen Zeilenvorschub in das SELECT-Feld ein, was Sie nicht möchten, wenn das Formular an Ort und Stelle bleibt. Um das Problem zu beheben, lassen Sie die Funktion „false“ für Enter zurückgeben und geben Sie „return KP();“ ein. im Anrufer. Ähnliche Beispiele finden Sie unter stackoverflow.com/questions/3059559/…

    – FloverOwe

    12. Mai 2021 um 19:46 Uhr


1283410cookie-checkWie man die “Enter”-Taste in einem Textfeld macht, um ein Formular zu senden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy