Bestimmen Sie, ob JavaScript e.keyCode ein druckbares Zeichen (kein Steuerzeichen) ist

Lesezeit: 6 Minuten

Benutzeravatar von devios1
devios1

Ich möchte nur die Reichweite(n) von JavaScript kennen keyCodes, die typisierbaren Zeichen entsprechen; oder alternativ der Bereich der nicht typisierbaren (Steuer-) Zeichen wie Rücktaste, Escape, Befehl, Umschalttaste usw., damit ich sie ignorieren kann.

Der Grund, warum ich frage, ist ein Anruf String.fromCharCode() führt zu ungeraden Zeichen für Steuertasten. Ich bekomme zum Beispiel “[” for left command, “%” for left arrow. Weirdness like that.

  • You don’t think I googled it first? Come on. Did you even check those results or just assume I’m an idiot?

    – devios1

    Sep 17, 2012 at 21:23


  • The word you are looking for is printable, most likely. Also, it seems keyCode is system and implementation-dependent, which only traduces to problems

    – Alexander

    Sep 17, 2012 at 21:25


  • Do you mean “printable”? Surely by definition every key code is “typeable”…

    – nnnnnn

    Sep 17, 2012 at 21:26

  • Sure, printable. I’m thinking “typeable” in the sense of it resulting in something typed, as opposed to just pressing a key that has some effect.

    – devios1

    Sep 17, 2012 at 21:27

  • I’m sure somebody has already done this. Why a) waste time, and b) increase the possibility of error?

    – devios1

    Sep 17, 2012 at 21:34


Shmiddty's user avatar
Shmiddty

Keydown will give you the keyCode of the key pressed, without any modifications.

$("#keypresser").keydown(function(e){
    var keycode = e.keyCode;

    var valid = 
        (keycode > 47 && keycode < 58)   || // number keys
        keycode == 32 || keycode == 13   || // spacebar & return key(s) (if you want to allow carriage returns)
        (keycode > 64 && keycode < 91)   || // letter keys
        (keycode > 95 && keycode < 112)  || // numpad keys
        (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
        (keycode > 218 && keycode < 223);   // [\]' (in Reihenfolge) Rückgabe gültig;  });

Nur die Zifferntasten, Buchstabentasten und die Leertaste haben entsprechende Tastencodes String.fromCharCode da es Unicode-Werte verwendet.

Keypress ist die charCode-Darstellung des eingegebenen Textes. Beachten Sie, dass dieses Ereignis nicht ausgelöst wird, wenn als Ergebnis des Tastendrucks kein Text “gedruckt” wird.

$("#keypresser").keypress(function(e){
    var charcode = e.charCode;
    var char = String.fromCharCode(charcode);
    console.log(char);
});

http://jsfiddle.net/LZs2D/1/ Wird zeigen, wie diese funktionieren.

KeyUp verhält sich ähnlich wie KeyDown.

  • Viele Zeichen fehlen zB , oder %

    – Alexander Elgin

    19. Februar 2016 um 11:47 Uhr

  • @AlexanderElgin Komma ist da, Tastencode 190. % ist dasselbe wie 5, Tastencode 52, bei gedrückter Umschalttaste.

    – Bob Rodes

    3. Juni 2016 um 7:49 Uhr

  • Funktioniert die erste Lösung international gut? Wäre es nicht auch besser, nach ungültigen Schlüsseln zu suchen?

    – Quentin Engles

    28. Oktober 2017 um 0:27 Uhr

  • @QuentinEngles – Ich bin mir fast sicher, dass es international nicht funktioniert: daniel-hug.github.io/characters/#k_49

    – Wilhelm

    10. Oktober 2018 um 6:14 Uhr


  • Leider wird keyPress veraltet

    – Daniel

    5. Juni 2019 um 22:10 Uhr

Nur für den Hintergrund, das Ereignis “Tastendruck” gibt Ihnen eine Zeichencode -Eigenschaft, wenn Sie eine Zeichentaste drücken.

Editor.addEventListener('keypress', function(event){
    if (event.charCode) {
        //// character key
        console.log( String.fromCharCode(event.charCode) ); /// convert charCode to intended character.
    } else {
        //// control key
    }

Das „keypress“-Ereignis erfasst jedoch nicht jeden Tastendruck – mehrere Tasten werden vor dem „keypress“-Ereignis ausgelöst.

Im Gegensatz dazu erfasst das “keydown”-Ereignis jeden Tastendruck, hat aber keine Zeichencode Eigentum. Wie können wir also feststellen, ob es sich um eine Zeichentaste handelt? Bei jedem Tastendruck prüfen, ob die Schlüsselcode innerhalb der unteren und oberen Grenzen für mehrere Bereiche liegt, ist nicht optimal effizient. Ich vermute, dass es auch Probleme mit Zeichen außerhalb des ASCII-Bereichs gibt.

Mein Ansatz ist die Überprüfung der Länge der Eigenschaft “Schlüssel” des Ereignisses. Die Eigenschaft “key” ist eine Alternative zu “keyCode”, um festzustellen, welche Taste gedrückt wurde. Zum Kontrolle Schlüssel, die “Schlüssel”-Eigenschaft ist beschreibend (z. B. „Pfeil rechts“, „F12“, „Zurück“, etc.). Zum Charakter Tasten, die “Schlüssel”-Eigenschaft für eine Zeichentaste ist nur der Charakter (z. B. “a”, “A”, “~”, “\” usw.). Daher hat die Länge der Eigenschaft “Schlüssel” für jeden Zeichenschlüssel die Länge 1; während Steuerzeichen eine Länge größer als 1 haben.

Editor.addEventListener('keydown', function(event){
    if (event.key.length == 1){ 
        //// character key
    } else {
        //// control key
    }
})

  • Das wäre genial gewesen, aber laut w3schools wird es von Safari nicht unterstützt: w3schools.com/jsref/event_key_key.asp

    – Robert

    30. Mai 2018 um 6:18 Uhr

  • In meinen Tests scheint Chrome dies nicht zu unterstützen

    – gillonba

    22. März 2019 um 23:07 Uhr

  • Robbert hat Recht, dass Safari immer noch der einzige Browser ist, der dies nicht unterstützt – es funktioniert bei Chrome für mich. Das ist seltsam, dass es bei dir nicht funktioniert, Gillonba. Ich bin wirklich neugierig, also möchte ich nur überprüfen, ob Sie das Ereignis „keydown“ anstelle von „keypress“ verwenden. Das ‘keypress’-Ereignis hat keine ‘key’-Eigenschaft für Steuerzeichen.

    – iamio

    24. März 2019 um 1:13 Uhr

Benutzeravatar von Teu
Teu

Mir ist aufgefallen, dass alle Zeichen mit der Länge 1 (‘A’, ‘B’, Zahl, Symbol) druckbar sind, also verwende ich nur. Ich verwende diese Lösung auch für nicht englische Zeichen:

if(e.key.length==1)
    print();

  • Ich runzelte die Stirn, als ich mir diese Antwort ansah, da es zu einfach zu funktionieren schien … Und doch. Es scheint genau das zu sein, was der Arzt verordnet hat!

    – Alexandre Roger

    12. Februar 2020 um 16:56 Uhr

  • Ich habe das gleiche gemerkt und wollte bei SO posten und habe gesehen, dass jemand schon daran gedacht hat (natürlich). Seltsam einfach und doch nicht weit verbreitet. Hoffentlich finde ich nicht irgendwann in der Zukunft heraus, warum. Im Moment scheint es super zu funktionieren!

    – Sean

    18. Juli 2020 um 23:18 Uhr

  • Dies ist fast 100% wahr (developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/… hat eine Liste von Nicht-Zeichen-Schlüsseln, die alle >1 Zeichen lang sind), trifft aber nicht ganz auf nicht-lateinische Sprachen zu. JS-Strings funktionieren nicht gut mit Unicode (mathiasbynens.be/notes/javascript-unicode) und für einige einzelne eingebbare druckbare Unicode-Zeichen, key.length wird >1 sein. Dies sollte korrekt funktionieren, wenn Sie dies tun [...e.key].length Zeichen explizit zu zählen.

    – Tim Perry

    13. November 2020 um 17:31 Uhr

  • Ach ja: In den meisten Fällen möchten Sie auch Ereignisse ignorieren, bei denen Strg/Alt/Meta gedrückt wird – Strg+C gibt jedoch kein druckbares Zeichen ein c ist bedruckbar.

    – Tim Perry

    13. November 2020 um 17:54 Uhr

Dieser Artikel enthält eine Liste der keyCodes in Javascript:

http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Sie können dafür auch RegEx verwenden:

$(".input").keyup(function (event) {
    if (event.key.match(/^[\d\w]$/i)) {
      // put function to trigger when a digit or a word character is pressed here
    }

das i Flag macht die Groß-/Kleinschreibung des Ausdrucks unempfindlich.

  • So geht das nicht. Das Zeichen ^ hat den Schlüsselwert “Dead” zum Kombinieren von Zeichen.

    – Denis

    5. Dezember 2019 um 16:00 Uhr

Benutzeravatar von Ryan F
Ryan f

Ab 2021 ist ein einfacher Weg, dies zu tun, durch InputEvent‘s.

Dies funktioniert nur für <input>, <select>und <textarea>was in den meisten Fällen der Fall sein sollte:

function handleInput(event) {
  if (event.inputType === 'insertText' || event.inputType === 'insertCompositionText') {
    console.log('Input Detected', event.data)
  }
}

element.oninput = handleInput
// or
element.addEventListener('input', handleInput)

Das insertCompositionText Eigenschaft ermöglicht es uns, einige zu erkennen vorgefertigte Zeichen.

Für Tags außer <input>, <select> und <textarea>wir können benutzen keydown Veranstaltung mit event.key.length mit den von Tim Perry erwähnten Korrekturen:

function handleKeydown(event) {
  if([...event.key].length === 1 && !event.ctrlKey && !event.metaKey) {
    console.log('Key Detected', event.key)
  }
}
element.onkeydown = handleKeydown
// or
element.addEventListener('keydown', handleKeydown)

Trotzdem glaube ich, dass beide Schwierigkeiten haben, einige vorgefertigte Charaktere und andere Macken zu erkennen.

  • So geht das nicht. Das Zeichen ^ hat den Schlüsselwert “Dead” zum Kombinieren von Zeichen.

    – Denis

    5. Dezember 2019 um 16:00 Uhr

1405190cookie-checkBestimmen Sie, ob JavaScript e.keyCode ein druckbares Zeichen (kein Steuerzeichen) ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy