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.

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.

• javascript

Share Improve this question Follow asked Jul 12, 2018 at 2:34 eikoeiko 5,35566 gold badges2121 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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);

Check out the documentation for Properties of KeyboardEvent on MDN page: https://developer.mozilla/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