keyboardshortcuts

[BaBa]

Hallo,

In einer Webanwendung sollen die User für bestimmte UI-Funktionen userspezifische Keyboardshortcuts vergeben können. E.g. sie können sich das Klicken des Html-Buttons "Senden" auf die Taste "m" legen.

Das erste Problem ist: wie gestallte ich das Formular zum Einstellen dieser. Momentan habe ich pro UI-Funktion ein Inputpärchen. In das eine muss man den Fokus legen und die gewünsche Taste drücken, dann belegt eine JS-Funktion dieses Feld mit dem keyCode und ein danebenstehendes mit dem key (Tastenbeschriftung).

$(this).val(e.keyCode); // show key code (no.) in the input field
var label = e.key;      // derive the key label

Die Sache ist die, dass einige Browser .key nicht unterstützen, e.g. Chrome. Außerdem finde ich die gesamte Vorgehensweise nicht sehr intuitiv.

Alternativ fällt mir noch ein, dass ich einfach ein Input-Select erstellen kann, mit den Labels aller vorhandenen Tasten (und den entsprechenden codes als Werten). Da gibt's dann aber z.B. Probleme mit den Nummerntasten. Der Nummernblock sendet andere Keycodes als die Zahlenreihe. Auch muss ich alle Eventualitäten für Mac abdecken. Vielleicht gibt es ja noch eine ganz elegante Lösung an die ich nicht gedacht haben. Ansonsten würde ich mich über Hinweise zu dieser Lösung freuen.

Die zweite Problematik ist, dass ich im Interface die gewählten Tastenkombis auch wieder hinschreiben möchte! Also, die Buttons bekommen kleine Labels mit den Tastenkombis. Dies natürlich aus der DB gespeist, die die persönlichen Shortcuts beinhalten.

Also: einfach mit den keyCodes arbeiten und serverseitig irgendein mapping erstellen, wie zum Beispiel hier?

Cheers,
BaBa

[mark]

Hi,

Vielleicht gibt es ja noch eine ganz elegante Lösung an die ich nicht gedacht habe

ich kenne deine Anwendung nicht, aber brauchst du wirklich alle Tasten? Es ist sehr unwahrscheinlich, dass sich jemand mehr als >10 Shortcuts für deine Seite merkt. Würde dir vorschlagen nicht alle Key-Kombinationen zuzulassen, gibt dem User ein paar Tastenkombinationen zur Auswahl.

Dies sollte eigentlich all deine genannten Probleme lösen:

• wie gestallte ich das Formular zum Einstellen dieser? input type=select

Der Nummernblock sendet andere Keycodes als die Zahlenreihe.

lass ihn weg.

Auch muss ich alle Eventualitäten für Mac abdecken

fällt auch zum Großteil weg, wenn du willst.

Die zweite Problematik ist, dass ich im Interface die gewählten Tastenkombis auch wieder hinschreiben möchte

Da hätte ich eine tolle Idee, die dir viellt. gefällt: Du könntest anstatt die Key Codes zu mappen ein Font erstellen, der Ligaturen verwendet und den Keycode normal hinschreiben. https://icomoon.io unterstützt das bereits. Hier, damit du verstehst, was ich meine: https://symbolset.com/

Wenn dir mein Vorschlag nicht gefällt, würde ich folgendes javascript verwenden und die Keys mappen, so, wie du gesagt hast. http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

lg mark

[mark]

Die zweite Problematik ist, dass ich im Interface die gewählten Tastenkombis auch wieder hinschreiben möchte

Oder noch einfacher mit css Attributselektoren. In Etwa so:

<button data-keycode1="irgendeineZahl" data-keycode2="irgendeineZahl">
     <span>+</span>
</button>

button[data-keycode1=irgendeineZahl]:before{
    content: "Dein Keycode";
}

button[data-keycode1=irgendeineZah2]:after{
   content: "Dein Keycode"
}

/*Wenn kein 2. Keycode Vorhanden */
button[data-keycode2=''] span{
   display:none;
}

In Sass oder Less kannst du das ja als Schleife ausgeben.

lg

[BaBa]

Die zweite Problematik ist, dass ich im Interface die gewählten Tastenkombis auch wieder hinschreiben möchte

Das Problem war nicht das Anzeigen. Das mache ich momentan so. Wobei das Fragezeichen per JS ersetzt wird durch den späteren Wert. Der steht irgendwo in einem JSON. Das Problem ist eher: wo kriege ich die Labels her. Aber bei dem Mapping ist das auch nicht das Problem. Dann wird eben zurückgemapt :)

Oder noch einfacher mit css Attributselektoren. In Etwa so:

<button data-keycode1="irgendeineZahl" data-keycode2="irgendeineZahl">
     <span>+</span>
</button>

button[data-keycode1=irgendeineZahl]:before{
    content: "Dein Keycode";
}

button[data-keycode1=irgendeineZah2]:after{
   content: "Dein Keycode"
}

/*Wenn kein 2. Keycode Vorhanden */
button[data-keycode2=''] span{
   display:none;
}

Was wäre davon das Ergebnis? Ich sehe es gerade nicht...

Cheers,
BaBa

[BaBa]

Hallo,

danke für die Antwort.

10 Shortcuts für deine Seite merkt. Würde dir vorschlagen nicht alle Key-Kombinationen zuzulassen, gibt dem User ein paar Tastenkombinationen zur Auswahl.

Es ist eine Webanwendung, bei der es darum geht, Informationen im großen Stil aufzunehmen. Angeboten werden Buttons zum Klicken, und eben Keyboardshortcuts. Es hat sich gezeigt, dass damit die Geschwindigkeit stark gesteigert werden konnte. Es geht um Echtzeit Dateneingabe, getrackt aus Videos. Es sind mehr als verschiedene 20 Aktionen. Das Merken der Kürzel ist nicht notwendig, da angezeigt. Ich benutze auch ganz gerne ALT und Shift. Nicht als Kombinationen. Einfach als Tasten.

input type=select

Das Formelement wäre mir neu :) <option><select>...

Der Nummernblock sendet andere Keycodes als die Zahlenreihe. lass ihn weg.

Weglassen geht auf keinen Fall. Höchstens die Unterscheidung könnte ich weglassen, indem ich die Nummernblock Keycodes auf die anderen ummappe (im JS). Gute Idee.

Auch muss ich alle Eventualitäten für Mac abdecken fällt auch zum Großteil weg, wenn du willst.

Die zweite Problematik ist, dass ich im Interface die gewählten Tastenkombis auch wieder hinschreiben möchte

Da hätte ich eine tolle Idee, die dir viellt. gefällt: Du könntest anstatt die Key Codes zu mappen ein Font erstellen, der Ligaturen verwendet und den Keycode normal hinschreiben.

Hm. Ist ja irgendwie auch eine Art mapping. Wenn ich das selber machen muss, ist mir das allerdings zuviel Arbeit. Da kann ich auch das Mapping nehmen, dass ich schon habe und ein <span> in den Button schreiben. Aber danke für die Idee.

Wenn dir mein Vorschlag nicht gefällt, würde ich folgendes javascript verwenden und die Keys mappen, so, wie du gesagt hast. http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

Da schaue ich rein und reporte dann nochmal.

Cheers,
BaBa