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

2 Answers 2

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