CODEWITHSUNDEEP
javascript
eiko
eiko

Reputation: 5345

How to tell whether KeyboardEvent.key is a printable character or control character?

I'm writing a keypress event which executes special functions for certain control characters, but inserts any printable character into a string.

this.handle_keypress = function(event) {
    let callback = this.control_function[event.key];
    if(callback) {
        callback.bind(this)(event);
    }
    else {
        this.myText += event.key;
    }
}

this.element.addEventListener('keypress', this.handle_keypress.bind(this));

But this will insert the text for unmapped control characters into my string (e.g. 'LeftArrow' or 'Backspace'). How can I tell which characters are printable characters and which are control characters?

Back in the day, I would use event.which or event.charCode, but these are marked as deprecated now.

I cannot use the input event, as far as I know, because I am not typing into a textarea or input field.

I'm running this in Firefox.

Upvotes: 10

Views: 3459

Answers (2)

Kernel James
Kernel James

Reputation: 4074

There's no immediately way to determine if event.key is a control character. But given that:

  • the names of control characters are all currently multiple chars long (e.g., "Escape") and only contain letters and numbers
  • the length of ASCII characters is 1
  • non-ASCII characters contain bytes outside the range of [a-zA-Z]

You can make a code to decide between either or:

var letters = [];

elm.addEventListener("keydown", function(e) {
  if(e.key.length == 1 || (e.key.length > 1 && /[^a-zA-Z0-9]/.test(e.key))) {
    letters.push(e.key);

  } else if(e.key == "Spacebar") {
    letters.push(" ");
  }
}, false);

Upvotes: 4

Code_maniac
Code_maniac

Reputation: 278

Check out the documentation for Properties of KeyboardEvent on MDN page: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

For KeyboardEvent.keyCode, they mention:

This attribute is deprecated; you should use KeyboardEvent.key instead, if available.

For KeyboardEvent.charCode, they mention:

Warning: This attribute is deprecated; you should use KeyboardEvent.key instead, if available.

So basically "charCode" and "keyCode" have been replaced by simply "code" and "key".

Also, to identify the control characters and avoid printing them, you can try:

  1. Create an array of neglected characters

    var unsupportedKeyCharacters = ["Shift", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];

  2. Call the function to check if entered character is printable

        var isSupportedKey = function (keyCharacter) {
    var isKeySupported = false;
    var unsupportedKeyCharacters = ["Shift", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
    for (var i = 0; i < unsupportedKeyCharacters.length; i++) {
        if (unsupportedKeyCharacters[i] === keyCharacter) {
            isKeySupported = false;
            break;
        }
    }
    return isKeySupported;
}

  3. Call the function to validate input

Upvotes: -1

Related Questions