Unlock the Secrets of JavaScript Key Codes

Question

Unlock the Secrets of JavaScript Key Codes

I am currently dealing with a JavaScript routine that I did not create. This routine is triggered by the onkeydown attribute of a text box in order to restrict certain keystrokes.

The first argument does not seem to have any significance. The second argument consists of a list of characters that are allowed.

function RestrictChars(evt, chars) {
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
        key = e.which;
    else
        return true;

    keychar = String.fromCharCode(key);

    if ((key == null) || (key == 0) || (key == 8) ||
        (key == 9) || (key == 13) || (key == 27))
        // Control key
        return true;
    else if (((chars).indexOf(keychar) > -1))
        return true;
    else
        return false;
}

This function appears to be functioning properly for alphanumeric characters. However, it seems to return false when characters such as . and / are pressed, despite these characters being included in the chars parameter. For instance, pressing the . key sets key to 190 and keychar to the "3/4" character.

Can somebody clarify how this was intended to work and/or why it is not working correctly? My knowledge of JavaScript is limited, so I'm not able to discern its intended functionality.

javascript keycode fromcharcode

Answer 1

Answer №1

There are a couple of issues with the code provided: firstly, when analyzing the character that has been typed, it's important to utilize the keypress event instead of keydown. This is because the keypress event is the only one that reliably provides information about the actual character entered. For more in-depth details on this and JavaScript key events in general, you can refer to . Secondly, there are mentions of a variable named e which should actually align with the evt parameter.

If you have a variable named textBox referencing the text input element, here's an improved version:

jsFiddle link: http://jsfiddle.net/9DZwL/

Code snippet:

function isKeypressCharValid(e, chars) {
    e = e || window.event;

    // Allow delete, tab, enter, and escape keys
    if (/^(8|9|13|27)$/.test("" + e.keyCode)) {
        return true;
    }

    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    var charTyped = String.fromCharCode(charCode);
    return chars.indexOf(charTyped) > -1;
}

textBox.onkeypress = function(evt) {
    if (!isKeypressCharValid(evt, "abc123")) {
        return false;
    }
};

Answer 2

There are a couple of issues with the code provided: firstly, when analyzing the character that has been typed, it's important to utilize the keypress event instead of keydown. This is because the keypress event is the only one that reliably provides information about the actual character entered. For more in-depth details on this and JavaScript key events in general, you can refer to . Secondly, there are mentions of a variable named e which should actually align with the evt parameter.

If you have a variable named textBox referencing the text input element, here's an improved version:

jsFiddle link: http://jsfiddle.net/9DZwL/

Code snippet:

function isKeypressCharValid(e, chars) {
    e = e || window.event;

    // Allow delete, tab, enter, and escape keys
    if (/^(8|9|13|27)$/.test("" + e.keyCode)) {
        return true;
    }

    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    var charTyped = String.fromCharCode(charCode);
    return chars.indexOf(charTyped) > -1;
}

textBox.onkeypress = function(evt) {
    if (!isKeypressCharValid(evt, "abc123")) {
        return false;
    }
};

Answer 3

Answer №2

Although I'm not proficient in JS, I can still provide an explanation on how it is meant to function. The reasons behind the values you are receiving for the specified keys are unknown to me.

keychar = String.fromCharCode(key);

This line of code verifies if the key input is a printable character such as a letter or punctuation mark.

if ((key == null) || (key == 0) || (key == 8) ||
    (key == 9) || (key == 13) || (key == 27))
    // Control key

The condition above checks whether the key is null, 0, 8 (backspace), 9 (tab), 13 (ENTER), or 27 (ESCAPE) - producing the expected Boolean result with logical OR operations.

else if (((chars).indexOf(keychar) > -1))

This part of the code examines if the character represented by keychar exists within the string of characters provided through the chars parameter.

Answer 4

Although I'm not proficient in JS, I can still provide an explanation on how it is meant to function. The reasons behind the values you are receiving for the specified keys are unknown to me.

keychar = String.fromCharCode(key);

This line of code verifies if the key input is a printable character such as a letter or punctuation mark.

if ((key == null) || (key == 0) || (key == 8) ||
    (key == 9) || (key == 13) || (key == 27))
    // Control key

The condition above checks whether the key is null, 0, 8 (backspace), 9 (tab), 13 (ENTER), or 27 (ESCAPE) - producing the expected Boolean result with logical OR operations.

else if (((chars).indexOf(keychar) > -1))

This part of the code examines if the character represented by keychar exists within the string of characters provided through the chars parameter.

Unlock the Secrets of JavaScript Key Codes

Answer №1

Answer №2

Similar questions

The webpage is missing a rendered React component even though it should be displayed

What is the origin of the second parameter in an arrow function that returns another arrow function in a React component with Redux?

Utilizing Jquery Validation to Remove a Class Upon Form Validation Success

"Figuring out a way to include a link with each image in a react-s

Beware: The use of anonymous arrow functions in Next.js can disrupt Fast Refresh and lead to the loss of local component state

Exploring ways to efficiently test the nested promises in an Angular service function

the process of extracting data from a request body in Angular 2

How can I effectively set up and utilize distinct npm modules on my local environment?

What is the best way to retrieve the most recent CMS posts information within a Gatsby-constructed project?

I'm interested in learning about the most efficient practices for handling JSON, performing math operations, and utilizing loops in JS/React. What techniques

Changing Background Color on Div Click

Add a new element to the page with a smooth fade-in animation using jQuery

display different vue component based on screen size

Steps for resolving the "endless redirection loop" issue in Sharepoint

Setting up webpack encore for async and await in a Symfony 4 and VueJs project

What could be causing my input box to act strangely when users attempt to input information?

Add a .handlebars or .hbs file to an HTML document

Using file types in Vue 3: a beginner's guide

AngularJS - Use promise instead of returning a data object

Tips for showing validation message just one time along with multiple error messages