Inhalt von input ändern und zeitgleich auf Inhalt prüfen

DataPearl

Liebe Community,

ich bastle seit einiger Zeit an einem Formular herum, komme aber an einer Stelle nicht weiter.

Ich möchte den Inhalt eines inputs durch Klicks ändern, was ich mit jQuery gut hinbekomme:

Code

function test1(){ $('#inputeins').val('Test1'); }
function test2(){ $('#inputeins').val('Test2'); }
function leer(){ $('#inputeins').val(''); }

Das Input selbst wird dabei nicht per Tastatur gefüllt oder geleert, sondern ausschließlich über onClicks, die die Funktionen oben ausführen.

Nun möchte ich, dass der Inhalt des inputs dynamisch ausgelesen und überprüft wird.

Solange das Input leer ist, soll ein inaktiver Weiter-Button (ein div) angezeigt werden. Wenn das Input mit Inhalt gefüllt ist, soll das eine div ausgeblendet und ein anderes eingeblendet werden.

Code

    <div id=\"weiterinaktiv\" class=\"buttonoff\" style=\"\" onclick=\"\">Weiter</div>
    <div id=\"weiteraktiv\" class=\"buttonon\" style=\"display:none;\" onclick=\"weiter1();\">Weiter</div>

Die Funktion mit show/hide steht und funktioniert. Was ich aber nicht hinbekomme: Wie kann ich den Inhalt des inputs dynamisch auslesen und je nachdem, ob es grade einen Inhalt hat oder nicht das entsprechende show/hide auslösen?

Alle Versionen, die ich gefunden habe, gehen davon aus, dass in das input geschrieben wird und feuern auf Fokus oder Tastenaktionen (keyup, keydown etc.). Aber eine funktionierende Überprüfung, ohne dass das input vom Nutzer selbst angesprochen wird, habe ich nicht gefunden.

Am Ende sollen je Seite mehrere Inputs überprüft werden, aber für das Beispiel reicht mir natürlich ein einziges.

Ich hoffe, ihr könnt mir helfen.

Viele Grüße und danke für eure Hilfe

DataPearl

Sempervivum

Hallo DataPearl und willkommen im Forum!

Ich dachte zunächst, das die Events "change" oder "input" dein Problem lösen aber das war ein Irrtum, wie auch hier angegeben wird:

Pure JavaScript listen to input value change

Is there a way I can create a constant function that listens to an input, so when that the input value changes, something is triggered immediately? I am…

stackoverflow.com

Die Lösungen mit Custom-Events, die dort angegeben werden sind unnötig kompliziert. Besser eine Funktion definieren, die deine Aktionen ausführt und explizit aufrufen:

Code

    <button onclick="test1()">Test 1</button>
    <button onclick="test2()">Test 2</button>
    <button onclick="leer()">Leeren</button>
    <input id="inputeins">
    <script>
        function test1() {
            $('#inputeins').val('Test1');
            aenderung();
        }
        function test2() {
            $('#inputeins').val('Test2');
            aenderung();
        }
        function leer() {
            $('#inputeins').val('');
            aenderung();
        }
        function aenderung() {
            console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
        }
    </script>

Alles anzeigen

Oder etwas kompakter:

Code

    <button onclick="aenderung('test1')">Test 1</button>
    <button onclick="aenderung('test2')">Test 2</button>
    <button onclick="aenderung('')">Leeren</button>
    <input id="inputeins">
    <script>
        function aenderung(theValue) {
            $('#inputeins').val(theValue);
            aenderungReaktion();
        }
        function aenderungReaktion() {
            console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
        }
    </script>

Alles anzeigen

Alternativ könnte man das auch noch etwas moderner aufziehen und das Ganze mit Klassen steuern und das Eventbubbling ausnutzen:

Code

    <button class="button-for-test1" data-val="test1">Test 1</button>
    <button class="button-for-test1" data-val="test2">Test 2</button>
    <button class="button-for-test1" data-val="">Leeren</button>
    <input id="inputeins">
    <button id="weiter">Weiter</button>
    <script>
        document.addEventListener('click', event => {
            // Wurde ein Button für das Eintragen in #inputeins gedrückt?
            if (event.target.classList.contains('button-for-test1')) {
                const
                    // Einzutragenden Wert bereit stellen:
                    dat = event.target.dataset.val,
                    input1 = document.getElementById('inputeins'),
                    weiterBtn = document.getElementById('weiter');
                input1.value = dat;
                // Ist der einzutragende Wert kein Leerstring?
                if (dat != '') {
                    // Klasse "aktiv" beim weiter-Button eintragen:
                    weiterBtn.classList.add('aktiv')
                } else {
                    // Klasse "aktiv" beim weiter-Button loeschen:
                    weiterBtn.classList.remove('aktiv')
                }
            }
            // Wurd der weiter-Button gedrückt?
            if (event.target.id == 'weiter') {
                // Weitere Verarbeitung abhängig von der Klasse "aktiv":
                if (event.target.classList.contains('aktiv')) {
                    console.log('weiter-Button gedrückt bei Zustand "aktiv"');
                } else {
                    console.log('weiter-Button gedrückt bei Zustand "inaktiv"');
                }
            }
        });
    </script>

Alles anzeigen

Dann kannst Du auch die Gestaltung des weiter-Buttons mit CSS steuern:

Code

        button#weiter {
            background-color: red;
        }

        button#weiter.aktiv {
            background-color: lightgrey;
        }

DataPearl

Hallo Sempervivum,

danke für deine lieben Einstiegsworte und deine umfassende Hilfe.

Ich hatte am Anfang auch gehofft, es mit change oder input lösen zu können, doch dazu muss ich ja immer selbst im input-Feld aktiv werden.

Die Costum-Lösungen habe ich zum Teil ausprobiert. Entweder, sie funktionieren nicht, weil ich den INPUT nicht selbst befülle, oder sie sind so umfassend, dass ich das nicht für so viele Felder ausüben kann.

Auf die eigentlich offensichtliche Lösung, die Funktion der Inhaltsüberprüfung bei jedem Click aufzurufen, bin ich tatsächlich nicht gekommen, weil ich es unbedingt ganzheitlich wollte. Aber das werde ich natürlich erstmal so umsetzen.

Code

function test1(){ $('#inputeins').val('Test1'); }
function test2(){ $('#inputeins').val('Test2'); }
function leer(){ $('#inputeins').val(''); }
function pruefung(){
  const inputeins = document.querySelector('#inputeins');
  const inputzwei = document.querySelector('#inputzwei');
  if (inputeins && inputeins.textContent.trim() !== "" && inputzwei && inputzwei.textContent.trim() !== "") {
    $('#weiterinaktiv').hide(); $('#weiteraktiv').show();
  }
  else {
    $('#weiteraktiv').hide(); $('#weiterinaktiv').show();
  }
}

Alles anzeigen

So müsste es funktionieren (wenn ich grad keinen Fehler eingebaut habe).

Gibt es trotzdem auch eine "elegante" Lösung, den Inhalt eines Elements dauerhaft dynamisch zu überprüfen und daraus eine Aktion abzuleiten?

Ich würde diese Methode später gern noch für ein anderes Projekt anwenden, bei dem andere NutzerInnen eine Eingabe vornehmen und diese beim Hauptadmin angezeigt wird. Wie ich diese Eingaben dynamsich in einen DIV oder INPUT lade, habe ich bereits gelöst, doch auch hier müsste ich die Seite bis zur Eingabe der letzten Daten permanent neu laden lassen, damit das Auslesen beim Neuladen eine Aktion feuert, wenn alle Felder ausgefüllt sind. Eine dynamische Überprüfung aller Felder könnte mir auch hier das ständige Neuladen ersparen.

Viele Grüße

DataPearl

DataPearl

Nachtrag: Ich hab den Code nochmal angepasst, so wie oben funktioniert er nämlich auch nicht.

Darum neu, getrestet und für gut befunden:

Code

function test1(){ $('#inputeins').val('Test1'); }
function test2(){ $('#inputeins').val('Test2'); }
function leer(){ $('#inputeins').val(''); }
function pruefung(){
  if (document.getElementById('inputeins').value !== '' && document.getElementById('inputzwei').value !== ''){
    $('#weiterinaktiv').hide(); $('#weiteraktiv').show();
  }
  else {
    $('#weiteraktiv').hide(); $('#weiterinaktiv').show();
  }
}

Alles anzeigen

Sempervivum

Guten Morgen,

ich hatte gestern schon die Idee, den MutationObserver zu verwenden, aber das scheitert daran, dass beim Setzen des Value sich das DOM nicht ändert und der Observer nicht feuert. Aber hier:

MutationObserver doesn't react to changes to text input fields

I'm working on adapting an IE-specific website to other browsers. For example, onpropertychange has been used extensively, and I'm using MutationObserver to…

stackoverflow.com

wird eine Lösung vorgeschlagen: Das value-Attribut ändern, dann feuert der MutationObserver. Hat zwar den Nachteil, dass Du zweigleisig fahren musst, wenn Du auch manuelle Eingaben erfassen willst, wäre aber eine recht elegante Lösung.

Und auch zu deinem letzten Code für die Überprüfung mehrerer Inputs fällt mir ein elegantere Lösung ein:

Den betr. Inputs eine Klasse geben und sie in einer Schleife abarbeiten:

Code

<input id="input1" class="to-check">
<input id="input2" class="to-check">
<input id="input3" class="to-check">
<script>
    let alleGefuellt = true;
    document.querySelectorAll('.to-check').forEach(item => {
         if (item.value === '') {
             alleGefuellt = false;
         }
    });
    if (alleGefuellt) {
        // weiter-Button aktivieren
    } else {
        // weiter-Button deaktivieren
    }
</script>

Alles anzeigen

(ungetestet)

Sempervivum

PS: Noch einfacher geht es, wenn Du die Formularvalidierung von HTML5 benutzt:

Die Inputs in ein Formular legen und ihnen ein "required" geben, dann kannst Du mit der Funktion checkValidity prüfen, ob alles valide ist bzw. in deinem Fall alle Inputs ausgefüllt:

Code

    <form>
        <input id="test1" required oninput="pruefung()">Test 1
        <input id="test2" required oninput="pruefung()">Test 2
        <input id="test3" required oninput="pruefung()">Test 3
    </form>
    <script>
        function pruefung() {
            const frm = document.querySelector('form');
            if (frm.checkValidity()) {
                console.log('valid, alle Eingabefelder gefüllt');
            } else {
                console.log('invalid');
            }
        }
    </script>

Alles anzeigen

tk1234

Zitat von DataPearl

Wenn das Input mit Inhalt gefüllt ist, soll das eine div ausgeblendet und ein anderes eingeblendet werden.
Code <div id=\"weiterinaktiv\" class=\"buttonoff\" style=\"\" onclick=\"\">Weiter</div> <div id=\"weiteraktiv\" class=\"buttonon\" style=\"display:none;\" onclick=\"weiter1();\">Weiter</div>

Div-Elemente dürfen (wie alle nicht interaktiven Elemente) nicht mit click-Handlern klickbar gemacht werden - so ist dein Formular unbedienbar da das div nicht per Tastaturbedienung erreichbar ist. Und selbst wenn das zwei richtige Buttons wären: die sind überflüssig, es reicht völlig einen Button zu verwenden und nur den disabled-Status zu setzen/zu entfernen.

Und: vergiss dass es jQuery mal gab, das ist überflüssig geworden und kann problemlos durch ganz normales Javascript ersetzt werden.

Zitat von Sempervivum

PS: Noch einfacher geht es, wenn Du die Formularvalidierung von HTML5 benutzt:
Die Inputs in ein Formular legen und ihnen ein "required" geben, dann kannst Du mit der Funktion checkValidity prüfen, ob alles valide ist bzw. in deinem Fall alle Inputs ausgefüllt: […]

Das geht auch einfacher: einen input-EventHandler auf form registrieren (natürlich nicht mit oninput sondern mit addEventListener), dann macht ein einziger Eventhandler das gleiche.

Inhalt von input ändern und zeitgleich auf Inhalt prüfen

Jetzt mitmachen!

Tags