Parantatatam
mag Cookies & Kekse
Hallo Tutorianer,
ich habe folgendes Problem: jeder der mit Javascript schon einmal Eingabefelder daraufhin überwacht hat, ob sich der Wert geändert hat, wird wissen, dass das Ereignis change erst abgefeuert, wenn das Eingabefeld den Fokus verliert. Deshalb habe ich mir ein eigenes Ereignis namens instantechange definiert, das sich aus den Ereignissen focus, keydown, keyup und keypress zusammen setzt, was bei mir so aussieht:
Wie man sehen kann, musste ich dafür fünf EventListener registrieren. Jetzt würde ich aber gerne beim Hinzufügen eines Ereignisses von mir nur den einen entsprechenden EventListener registrieren müssen. Hat dafür irgendjemand eine Idee, wie man das automatisieren kann?
ich habe folgendes Problem: jeder der mit Javascript schon einmal Eingabefelder daraufhin überwacht hat, ob sich der Wert geändert hat, wird wissen, dass das Ereignis change erst abgefeuert, wenn das Eingabefeld den Fokus verliert. Deshalb habe ich mir ein eigenes Ereignis namens instantechange definiert, das sich aus den Ereignissen focus, keydown, keyup und keypress zusammen setzt, was bei mir so aussieht:
Code:
window.addEventListener('DOMContentLoaded', function () {
var event = document.createEvent('Event');
event.initEvent('instantechange', true, true);
a = document.getElementById('input');
a.addEventListener('instantechange', function () {
b = document.getElementById('output');
b.innerText = this.value.length + ' Zeichen';
}, false);
a.addEventListener('keypress', function () {
if(this.value !== this.prev_value) {
this.dispatchEvent(event);
this.prev_value = this.value;
}
}, false);
a.addEventListener('keyup', function () {
if(this.value !== this.prev_value) {
this.dispatchEvent(event);
this.prev_value = this.value;
}
}, false);
a.addEventListener('keydown', function () {
if(this.value !== this.prev_value) {
this.dispatchEvent(event);
this.prev_value = this.value;
}
}, false);
a.addEventListener('focus', function () {
this.prev_value = this.value;
}, false);
}, false);
HTML:
<body>
<input type="text" id="input" /><output id="output">0 Zeichen</output>
</body>
