Wie man die “Enter”-Taste in einem Textfeld macht, um ein Formular zu senden
Lesezeit: 6 Minuten
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.
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
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");
});
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
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>
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
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
12834100cookie-checkWie man die “Enter”-Taste in einem Textfeld macht, um ein Formular zu sendenyes
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