it-swarm.com.de

Wie reiche ich ein Formular bei der Eingabe ein, wenn das Textfeld den Fokus hat?

Wenn Sie den Textbereich eines Formulars ausfüllen, wird beim Drücken der Eingabetaste standardmäßig in die nächste Zeile gewechselt. Wie kann ich das Verhalten des Formulars so ändern, dass es beim Drücken der Eingabetaste gesendet wird, auch wenn sich der Benutzer in einem Textbereich befindet?

Ich habe Firebug zum Auschecken des Kommentartextbereichs von Stack Overflow verwendet (der dieses Verhalten aufweist), konnte jedoch kein JavaScript erkennen, das diesen Effekt erzielt hat. Gibt es eine Möglichkeit, das Verhalten des Textbereichs ohne Verwendung von JavaScript zu ändern?

49
andrew

Ohne JavaScript geht das nicht. Stackoverflow verwendet die JavaScript-Bibliothek jQuery , die beim Laden der Seite Funktionen an HTML-Elemente anfügt.

So können Sie es mit Vanilla JavaScript machen:

<textarea onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }"></textarea>

Der Schlüsselcode 13 ist die Eingabetaste.

So können Sie es mit jQuery wie mit Stackoverflow machen:

<textarea class="commentarea"></textarea>

mit

$(document).ready(function() {
    $('.commentarea').keydown(function(event) {
        if (event.which == 13) {
            this.form.submit();
            event.preventDefault();
         }
    });
});
104
BalusC
<form id="myform">
    <input type="textbox" id="field"/>
    <input type="button" value="submit">
</form>

<script>
    $(function () {
        $("#field").keyup(function (event) {
            if (event.which === 13) {
                document.myform.submit();
            }
        }
    });
</script>
6
Eric Fortis

Warum soll ein Textbereich gesendet werden, wenn Sie die Eingabetaste drücken?

Eine "Texteingabe" wird standardmäßig gesendet, wenn Sie die Eingabetaste drücken. Es ist ein einzeiliger Eingang.

<input type="text" value="...">

Ein "Textarea" wird nicht, da es von mehrzeiligen Funktionen profitiert. Das Senden bei der Eingabe nimmt einen Teil dieses Vorteils weg.

<textarea name="area"></textarea>

Sie können JavaScript-Code hinzufügen, um das Drücken der Eingabetaste und die automatische Übermittlung zu erkennen. Sie sollten jedoch möglicherweise eine Texteingabe verwenden.

6
jthompson