Unerwartetes Verhalten von ENTER in Erfassungsformularen

[vgerlach]

Wenn man ein Dokument erfässt oder in der Administration editiert und dabei in einem Feld ENTER drückt, ist das Verhalten derzeit für den Benutzer schwer nachvollziehbar. In der Administration wird das Dokument gespeichert/die Bearbeitung beendet. Im Veröffentlichungsprozess beim Anlegen eines neuen Dokuments wird scheinbar der Submit-Button, der an erster Stelle steht, ausgeführt. Das führt dazu, dass z.B. ein weiteres Titel- oder Autorenfeld hinzugefügt oder bei einer Collection die nächste Ebene geöffnet wird.
Das gewünschte Verhalten wäre in diesem Fall, dass bei der Eingabe von ENTER kein Submit o.ä. ausgeführt wird.

[j3nsch]

In der Administration verhält sich die Enter-Taste halbwegs nachvollziehbar, oder? In einem Textarea-Feld, also z.B. Titel und Zusammenfassungen, kann mit der Enter-Taste normal umgebrochen werden, um mehrzeiligen Text einzugeben. Wird bei einem anderen Element, z.B. einem einfachen Eingabe-Feld, die Enter-Taste betätigt wird das Formular gespeichert. Wenn wir das unterdrücken, muss man zum Speichern zur Maus greifen, was auch nicht jeder will. Hier würde ich erst einmal nichts ändern, oder gibt es Vorschläge, die alle zufrieden machen?

Im Publish-Formular ist das Verhalten bei mir (aktueller Firefox, Ubuntu 24), bei Textarea-Feldern das gleiche wie in der Administration. Bei einfachen Eingabe-Felder, wird der erste Submit-Button auf der Seite betätigt. Das ist im Alle-Felder Test-Dokumenttyp, der Add-Button für Autor*innen. Wenn man also einen Titel eingibt und Enter drückt, wird ein weiterer Eintrag für Autor*innen hinzugefügt. Das passiert nicht, wenn der Fokus auf einem Submit-Button ist. Dann wird der jeweilige Button mit Enter gedrückt. Hier sollte etwas geändert werden.

Das Submit-Verhalten von Enter könnte komplett unterdrückt werden, darf aber nicht das Verhalten in Textarea-Feldern verändern. Enter sollte immer noch funktionieren, wenn ein Submit-Button den Fokus hat.

Für manche Felder würde ein spezielles Enter-Verhalten Sinn machen, z.B. um mit Enter ein weiteres Schlagwort eingeben zu können, ohne zur Maus greifen zu müssen, aber ich denke das würde im Augenblick zu weit gehen.

[vgerlach]

Ja, das Verhalten in der Administration finde ich auch nachvollziehbar. Das kann so bleiben.

[bfalkenstein]

Wäre es eine Idee, dies durch eine JS-Funktion zu verhindern, die in den Formularen eingebunden wird?
So würde "Enter" nicht mehr als "Submit" interpretiert, aber bei Textareas kann trotzdem ein Absatz erzeugt werden.

function preventEnterSubmit() {
    document.addEventListener("DOMContentLoaded", function() {
        const form = document.querySelector("form");
        const inputs = form.querySelectorAll("input[type='text']");
        const textareas = form.querySelectorAll("textarea");
        const submitButton = form.querySelector("input[type='submit'], button[type='submit']");

        // Verhindere das Absenden des Formulars in Textfeldern (<input type="text">)
        inputs.forEach(input => {
            input.addEventListener("keydown", function(event) {
                if (event.key === "Enter") {
                    event.preventDefault(); // Verhindert das Absenden bei der Eingabetaste in Textfeldern
                }
            });
        });

        // In <textarea> Feldern wird ein Absatz erzeugt (kein preventDefault)
        textareas.forEach(textarea => {
            textarea.addEventListener("keydown", function(event) {
                if (event.key === "Enter") {
                    // Standardverhalten bleibt bestehen, damit ein neuer Absatz erzeugt wird
                }
            });
        });

        // Wenn Submit-Button den Fokus hat, funktioniert Enter als Submit
        if (submitButton) {
            submitButton.addEventListener("keydown", function(event) {
                if (event.key === "Enter") {
                    form.submit(); // Submit
                }
            });
        }
    });
}

[j3nsch]

Danke. Ja, ich denke auch, das Problem muss mit Javascript gelöst werden. Vermutlich könnte der Code noch etwas kürzer aussehen, oder? Braucht es die Event-Handler für Submit und Textarea-Elemente? Evtl. könnte man auch einen Handler an das gesamte Formular hängen, der dann prüft, ob ein Text-Element den Fokus hat. Ich habe das aber noch nicht getestet.

Wenn Ihr, @bfalkenstein, mir einen PR schicken wollt, gerne, dann aber bitte basierend auf dem MASTER-Branch, damit wir das nächsten Dienstag als Patch-Release 4.8.0.7 rausgeben können. Falls das mit dem PR gerade nicht passt, mache ich es später diese Woche selber. Vielen Dank!

[bfalkenstein]

Man könnte die neue Funktion in die bestehende submit.js integrieren und kommt mit einem einzigen Event-Listener aus.

$(function () {
    // prevent double submits on forms
    $('form').submit(function () {
        $(':submit', this).click(() => false);
    });

    // prevent Enter key from submitting in text inputs
    $('form').on('keydown', e => {
        if (e.key === 'Enter') {
            if ($(e.target).is("input[type='text']")) e.preventDefault();
            if ($(e.target).is("input[type='submit'], button[type='submit']")) e.target.click();
        }
    });
});

[bfalkenstein]

@j3nsch, den PR haben wir leider nicht mehr geschafft. Wenn das noch ins Patch-Release 4.8.0.7 soll, könntest du das bitte machen? Danke!

[j3nsch]

Die Anpassung ist auf Branch issue1243, später dann auf v4.8.0.7. Der Release wird Morgen nach 16 Uhr stattfinden. Bis dahin könnt Ihr testen, ob das so reicht.

Ich habe den Vorschlag von @bfalkenstein übernommen, vielen Dank, aber noch weiter gekürzt. Bei den Text-Elementen passiert jetzt mit ENTER gar nichts mehr. Alles andere funktioniert wie bisher, zumindest in Firefox unter Linux.

[bfalkenstein]

Vielen Dank! Funktioniert auch mit Firefox und Chrome unter Windows.

[bfalkenstein]

Es gibt leider Beschwerden von Userseite, dass die unterdrückte Funktion von 'Enter' in allen Formularen greift. Also z.B. auch in der Suche (wo es nicht so problematisch ist, weil es einen 'Suchen'-Button gibt), aber vor allem auch bei der Suche nach Personen, wo es keinen Button gibt. D.h. eine Personensuche ist aktuell nicht möglich.

Ich sehe zwei Möglichkeiten:

1. Das Skript in ein (neues?) js-File auslagern, das nur im Modul "publish" geladen wird;

2. Das Skript in submit.js belassen, aber so einschränken, dass es nur im Publikationsformular greift:

    $('form').on('keydown', e => {
        const formAction = $(e.target).closest('form').attr('action');
        if (formAction && formAction.includes('/publish/form/check')) {
            if (e.key === 'Enter' && $(e.target).is("input[type='text']")) {
                e.preventDefault();
            }
        }
    });

[j3nsch]

@bfalkenstein Ich habe den neuen Kommentar in Ticket #1258 umgewandelt. Das Ticket hier ist geschlossen und released. Wenn ich also nicht extra die Benachrichtungs-E-Mail aufhebe, taucht es nie wieder auf meinem Schirm auf.