Add keyboard handling in VocabPracticeDialog for improved user interaction
- Implemented keydown event listener to manage Enter key functionality for navigating questions and submitting answers. - Enhanced user experience by allowing Enter to trigger actions based on the current dialog state, improving accessibility during practice sessions. - Ensured proper cleanup of event listeners when closing the dialog to prevent memory leaks.
This commit is contained in:
@@ -185,6 +185,9 @@ export default {
|
|||||||
this.locked = false;
|
this.locked = false;
|
||||||
this.resetQuestion();
|
this.resetQuestion();
|
||||||
this.$refs.dialog.open();
|
this.$refs.dialog.open();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
document.addEventListener('keydown', this.handleKeyDown);
|
||||||
|
});
|
||||||
this.reloadPool();
|
this.reloadPool();
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
@@ -194,11 +197,32 @@ export default {
|
|||||||
}
|
}
|
||||||
const cb = this.onClose;
|
const cb = this.onClose;
|
||||||
this.onClose = null;
|
this.onClose = null;
|
||||||
|
document.removeEventListener('keydown', this.handleKeyDown);
|
||||||
this.$refs.dialog.close();
|
this.$refs.dialog.close();
|
||||||
try {
|
try {
|
||||||
if (cb) cb();
|
if (cb) cb();
|
||||||
} catch (_) {}
|
} catch (_) {}
|
||||||
},
|
},
|
||||||
|
handleKeyDown(event) {
|
||||||
|
// Enter soll bei "Weiter" (falsch beantwortet) funktionieren.
|
||||||
|
// Im Tippmodus soll Enter weiterhin "Prüfen" auslösen (Input hat eigenen handler).
|
||||||
|
if (event.key !== 'Enter' && event.keyCode !== 13) return;
|
||||||
|
|
||||||
|
if (this.showNextButton) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Falls man im Tippmodus ist und der Fokus NICHT im Input liegt, erlauben wir Enter als "Prüfen".
|
||||||
|
if (!this.answered && !this.simpleMode && !this.locked) {
|
||||||
|
const tag = event.target?.tagName?.toLowerCase?.();
|
||||||
|
if (tag !== 'input' && tag !== 'textarea') {
|
||||||
|
event.preventDefault();
|
||||||
|
this.submitTyped();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
normalize(s) {
|
normalize(s) {
|
||||||
return String(s || '')
|
return String(s || '')
|
||||||
.trim()
|
.trim()
|
||||||
|
|||||||
Reference in New Issue
Block a user