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.resetQuestion();
|
||||
this.$refs.dialog.open();
|
||||
this.$nextTick(() => {
|
||||
document.addEventListener('keydown', this.handleKeyDown);
|
||||
});
|
||||
this.reloadPool();
|
||||
},
|
||||
close() {
|
||||
@@ -194,11 +197,32 @@ export default {
|
||||
}
|
||||
const cb = this.onClose;
|
||||
this.onClose = null;
|
||||
document.removeEventListener('keydown', this.handleKeyDown);
|
||||
this.$refs.dialog.close();
|
||||
try {
|
||||
if (cb) cb();
|
||||
} 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) {
|
||||
return String(s || '')
|
||||
.trim()
|
||||
|
||||
Reference in New Issue
Block a user