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

Content within a Row of a Data Table

It is impossible for me to invoke a method within a function

How can React and Redux ensure that response data is accessible to every component?

What is the method for incorporating locales into getStaticPaths in Next.js?

What is the proper way to document instance members that have been added through Object.defineProperties()?

What is the purpose of assigning scope.property to scope.property() in order for the expression to function properly?

The response from Axios in NodeJs is displaying incorrect encoding

How to iterate through a "for" loop in JavaScript using Python-Selenium?

The correct reading of JavaScript in HTML is a common source of confusion

What is the most effective way to display a card with varying values depending on the user's input in a form?

Transferring an organized array to processing

When using mongoose, is it possible to add a new item and retrieve the updated array in one endpoint?

Incorrect posture during the movements

What could be causing the target to malfunction in this situation?

What is the process for sending JavaScript data to a Rails controller action?

Are we looking at a declaration of an arrow function? Is this concept even real?

Solution for Organizing Tables

The functionality of the Bootstrap carousel for moving to the next and previous images is malfunctioning, as it only

Retrieve data from a REST API in a dynamic manner without manually specifying the table structure in the HTML code

Ways to terminate all AJAX requests within a for loop