JS/AJAX: Tastendruck simulieren

Grunge

Erfahrenes Mitglied
Hi

ich suche seit Tagen im Internet. Entweder such ich falsch oder es war einfach noch keiner so frei sich das auszusuchen.

also über Auswahlboxen kann der Benutzer einer Website sein Geburtsdatum "einstellen". TT. MM. JJJJ

Das wird in ein Hiddenfeld als Text geschrieben, z.B. 01.01.1935. Jetzt prüfe ich anhand dieses Datums eben ob die Person schon 18 ist. Funktioniert soweit!

Nur löst die Funktion erst dann aus, wenn aktiv in der Feld geschrieben wurde. Sprich bei aktivem Tastendruck im Feld. Jetzt habe ich überlegt, dass ich einfach ein Leerzeichen in das Feld schreibe, aber so dass JS eben denkt, ich hätte die Taste auf dem Keyboard gedrückt.

So dass die Funktion eben getriggert wird. Ich arbeite an einem Formular und nutze den Formvalidator von Bootstrap der das Formular erst abschickt, wenn alles i.O ist. Dieser brauch aber eben genau diese aktive Eingabe im Textfeld.

Danke für eure Hilfe!
 
Ok prinzipiell glaub ich schon" klingt auf jedenfall logisch. Ich bin kein Profi in JS, kannst du mir nen Ansatz geben wie ich das für ne select box machen kann? Habs jetzt so gemacht;

Code:
<select onChange="InitMouseDown(event);">
<option>....</option>
.
.
.
</select>

// Hier dann eben das Ergebnis der Ausgewählten Option
<input type="text" />
 
Du schriebst eingangs:
also über Auswahlboxen kann der Benutzer einer Website sein Geburtsdatum "einstellen". TT. MM. JJJJ

Das wird in ein Hiddenfeld als Text geschrieben, z.B. 01.01.1935. Jetzt prüfe ich anhand dieses Datums eben ob die Person schon 18 ist. Funktioniert soweit!

Nur löst die Funktion erst dann aus, wenn aktiv in der Feld geschrieben wurde. Sprich bei aktivem Tastendruck im Feld.
Das verstehe ich so: In das hidden Feld schreibst Du mit Javascript und hast das Problem, dass dabei weder das Event "input" noch "change" feuern. Trifft das zu?
 
Ich habe das mal rasch getestet und es hat sich bestätigt, dass das Event "change" nicht feuert wenn mit Javascript in das Eingabefeld eingetragen wird.
Ich habe dann meinen Testcode um dispatchEvent erweitert und es funktioniert:
Code:
    <select>
        <option>Opt 1</option>
        <option>Opt 2</option>
        <option>Opt 3</option>
    </select>
    <input hidden>
    <script>
        const
            sel = document.querySelector('select'),
            inp = document.querySelector('input');
        sel.addEventListener('change', event => {
            inp.value = event.target.value;
            // Event "change" für das hidden Input triggern
            const inputEvent = new Event('change');
            inp.dispatchEvent(inputEvent);
        });
        inp.addEventListener('change', event => {
            console.log('event change for input fired');
        });
    </script>
 

Neue Beiträge

Zurück