Differences Between JavaScript KeyCode and CharCodeIn the world

Question

Differences Between JavaScript KeyCode and CharCodeIn the world

Issue at Hand:

The challenge is to restrict allowed characters in an HTML input field to only a-z and A-Z.
It is essential for business requirements that this restriction happens on KeyPress, preventing disallowed characters from even appearing in the input.
Tab, Enter, arrows, backspace, and shift should all be permitted. Users must have the ability to freely navigate within the textbox, delete characters, etc.

This marks the beginning of my code...

var keyCode = (e.keyCode ? e.keyCode : e.which);

However, each value obtained in keyCode does not match any character charts found online. For instance, the character "h" results in a keycode of 104.

Are KeyCode and CharCode distinct? Which one includes control characters? Is conversion necessary?

How can I use JavaScript to limit input to a-z and A-Z while allowing the necessary keys?

javascript keycode

Answer 1

Answer №1

To discover the answers to all queries, simply visit this webpage.

...in brief:

The most dependable way to retrieve character information (as opposed to key code data) is through the keypress event.
During the keypress event, nearly all browsers other than IE <= 8 record the character code in the which property of the event object. Additionally, a majority (though not all) of these browsers store the character code in the charCode property.
In the keypress event, IE <= 8 retains the character code within the keyCode property.

To obtain the character code pertaining to the keypress event universally, assuming the event object is stored in a variable named e, use the following line:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

This method usually returns a legitimate character code or else a value of 0. However, there are instances where non-zero values may be returned incorrectly:

In Opera prior to version 10.50 for keys such as Insert, Delete, Home, and End
In recent editions of Konqueror for non-character keys.

To address the first issue, a more complex solution involving the utilization of the keydown event is necessary.

Answer 2

To discover the answers to all queries, simply visit this webpage.

...in brief:

The most dependable way to retrieve character information (as opposed to key code data) is through the keypress event.
During the keypress event, nearly all browsers other than IE <= 8 record the character code in the which property of the event object. Additionally, a majority (though not all) of these browsers store the character code in the charCode property.
In the keypress event, IE <= 8 retains the character code within the keyCode property.

To obtain the character code pertaining to the keypress event universally, assuming the event object is stored in a variable named e, use the following line:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

This method usually returns a legitimate character code or else a value of 0. However, there are instances where non-zero values may be returned incorrectly:

In Opera prior to version 10.50 for keys such as Insert, Delete, Home, and End
In recent editions of Konqueror for non-character keys.

To address the first issue, a more complex solution involving the utilization of the keydown event is necessary.

Answer 3

Answer №2

Oh my goodness. It seems like KeyboardEvent attributes such as key, char, keyCode, charCode, and which are all either deprecated or plagued with bugs, based on Mozilla's API documentation - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent. Even JQuery is not much help in this situation and leaves it up to the user to figure things out https://api.jquery.com/keydown/.

Answer 4

Oh my goodness. It seems like KeyboardEvent attributes such as key, char, keyCode, charCode, and which are all either deprecated or plagued with bugs, based on Mozilla's API documentation - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent. Even JQuery is not much help in this situation and leaves it up to the user to figure things out https://api.jquery.com/keydown/.

Answer 5

Answer №3

Did you know that 104 represents the ASCII code for lowercase 'h'? If you want to retrieve the ASCII code of a character typed onkeypress, simply use e.which || e.keyCode. No need to worry about keys being held down because keypress automatically repeats for typed text in all browsers (as explained in detail on ).

All you really need is:

<input id="textbox">

<script type="text/javascript">
document.getElementById('textbox').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

Give it a try: http://jsfiddle.net/wcDCJ/1/

(Refer to http://en.wikipedia.org/wiki/Ascii for more information on ASCII codes)

Answer 6

Did you know that 104 represents the ASCII code for lowercase 'h'? If you want to retrieve the ASCII code of a character typed onkeypress, simply use e.which || e.keyCode. No need to worry about keys being held down because keypress automatically repeats for typed text in all browsers (as explained in detail on ).

All you really need is:

<input id="textbox">

<script type="text/javascript">
document.getElementById('textbox').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

Give it a try: http://jsfiddle.net/wcDCJ/1/

(Refer to http://en.wikipedia.org/wiki/Ascii for more information on ASCII codes)

Answer 7

Answer №4

The onKeyPress event handler operates with distinct codes for uppercase and lowercase letters. If you enable the caps lock key before typing, you will likely obtain the expected code.

In contrast, both onKeyUp and onKeyDown events utilize identical character codes for uppercase and lowercase letters. I suggest opting for onKeyUp as it closely resembles onKeyPress in functionality.

Answer 8

The onKeyPress event handler operates with distinct codes for uppercase and lowercase letters. If you enable the caps lock key before typing, you will likely obtain the expected code.

In contrast, both onKeyUp and onKeyDown events utilize identical character codes for uppercase and lowercase letters. I suggest opting for onKeyUp as it closely resembles onKeyPress in functionality.

Answer 9

Answer №5

/* To capture key codes for non-printing keys, it is recommended to use the keydown event instead of keypress. */

function checkKey(e){
    e = e || window.event;
    var specialKeys={
        k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock',
        k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right',
        k40: 'Ar Down', k45: 'Insert', k46: 'Delete'
    },
    keyCode = e.keyCode;
    if((keyCode > 64 && keyCode < 91) || specialKeys['k'+keyCode]) return true;
    else return false;
}

inputField.onkeydown = checkKey;

keyCode > 64 && keyCode < 91 // Represents a-zA-Z

specialKeys['k'+integer]) defines allowed special keycodes

Answer 10

/* To capture key codes for non-printing keys, it is recommended to use the keydown event instead of keypress. */

function checkKey(e){
    e = e || window.event;
    var specialKeys={
        k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock',
        k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right',
        k40: 'Ar Down', k45: 'Insert', k46: 'Delete'
    },
    keyCode = e.keyCode;
    if((keyCode > 64 && keyCode < 91) || specialKeys['k'+keyCode]) return true;
    else return false;
}

inputField.onkeydown = checkKey;

keyCode > 64 && keyCode < 91 // Represents a-zA-Z

specialKeys['k'+integer]) defines allowed special keycodes

Answer 11

Answer №6

Here is an example of some code:

<div id="exampleID">
    <h1>Sample Heading</h1>
    <p>This is a sample paragraph.</p>
</div>

The code snippet provided above demonstrates how to structure HTML elements within a div container.

By using jQuery's document ready function, you can implement logic to handle user input events for specific elements on your page.

In the code snippet below, we showcase a method for filtering keyboard inputs, allowing only certain characters or actions while preventing others.

Keep in mind that this code was initially designed to restrict input to alphanumeric values (A - Z, a - z, 0 - 9), but modifications can be made to suit your requirements:

        <script>
            jQuery( document ).ready( function() {

                // Implementing keyboard input filtering
                jQuery( "#exampleID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;

                    // Depending on the key pressed, different actions are taken
                    if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) {
                        if(
                            // Allow backspace and tab keys
                            ( _key === 8 || _key === 9 )
                        ){}

                        else if(
                            // Allow end, home, arrow keys navigation
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )
                        ){}

                        else if(
                            // Allow delete key
                            ( _key === 46 )
                        ){}

                        else if(
                            // Restrict input to letters A-Z case insensitive
                            ( _key >= 65 && _key <= 90 )
                        ){}

                        else {
                            e.preventDefault(); // Prevent default action for non-permitted input
                        }
                    }

                });
            });
        </script>

Answer 12

Here is an example of some code:

<div id="exampleID">
    <h1>Sample Heading</h1>
    <p>This is a sample paragraph.</p>
</div>

The code snippet provided above demonstrates how to structure HTML elements within a div container.

By using jQuery's document ready function, you can implement logic to handle user input events for specific elements on your page.

In the code snippet below, we showcase a method for filtering keyboard inputs, allowing only certain characters or actions while preventing others.

Keep in mind that this code was initially designed to restrict input to alphanumeric values (A - Z, a - z, 0 - 9), but modifications can be made to suit your requirements:

        <script>
            jQuery( document ).ready( function() {

                // Implementing keyboard input filtering
                jQuery( "#exampleID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;

                    // Depending on the key pressed, different actions are taken
                    if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) {
                        if(
                            // Allow backspace and tab keys
                            ( _key === 8 || _key === 9 )
                        ){}

                        else if(
                            // Allow end, home, arrow keys navigation
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )
                        ){}

                        else if(
                            // Allow delete key
                            ( _key === 46 )
                        ){}

                        else if(
                            // Restrict input to letters A-Z case insensitive
                            ( _key >= 65 && _key <= 90 )
                        ){}

                        else {
                            e.preventDefault(); // Prevent default action for non-permitted input
                        }
                    }

                });
            });
        </script>

Answer 13

Answer №7

When it comes to key codes, ASCII values play a crucial role. For instance, ASCII-104 corresponds to the letter 'h'.

To delve deeper into ASCII values, check out this informative link:

Another interesting tidbit is that charcode serves as an alternative in certain browsers, as mentioned in a separate response.

For those interested in exploring a cross-browser example, here's a helpful article to guide you through:

Answer 14

When it comes to key codes, ASCII values play a crucial role. For instance, ASCII-104 corresponds to the letter 'h'.

To delve deeper into ASCII values, check out this informative link:

Another interesting tidbit is that charcode serves as an alternative in certain browsers, as mentioned in a separate response.

For those interested in exploring a cross-browser example, here's a helpful article to guide you through:

Answer 15

Answer №8

Perhaps a different approach would work better for you. Maybe try implementing it this way:

<input id="example">

<script type="text/javascript>
var checkLetters = function(element){
    if(this.value.match(/[^a-zA-Z]/)){
        this.value = this.value.replace(/[^a-zA-Z]+/, '')
    }
}
document.getElementById("example").onkeyup = checkLetters
</script>

Just remember to validate input on the server-side as well.

Answer 16

Perhaps a different approach would work better for you. Maybe try implementing it this way:

<input id="example">

<script type="text/javascript>
var checkLetters = function(element){
    if(this.value.match(/[^a-zA-Z]/)){
        this.value = this.value.replace(/[^a-zA-Z]+/, '')
    }
}
document.getElementById("example").onkeyup = checkLetters
</script>

Just remember to validate input on the server-side as well.

Differences Between JavaScript KeyCode and CharCodeIn the world

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

What might be the reason for jQuery not functioning in Internet Explorer 11?

How do I ensure that the active item in the sidebar remains in view as I scroll?

Using the Permissions directive in Angular

Experiencing problems with the calling convention in JavaScript

Problems arise when making a second call back to the ajax web method

How can I retrieve data from local storage based on a specific key value using a query?

Vue - making one element's width match another element's width

What is the correct way to reuse sub-dependencies using NPM?

decoding JSON without the need for jQuery

Ways to retrieve the length of a list received from a controller using the onChange() method in JQuery

VueJS avoids displaying a specific data in every iteration of a v-for loop

Guide to sending parameters to the method function of the Vue.js router

Adding the number of occurrences to duplicates in a string array using JavaScript

Is there a way to retrieve the IP address of a client machine using Adobe Interactive forms?

Integrating Dialogflow with a Heroku JavaScript application

Divide the string into a collection of individual elements

Creating a drop-down menu using JavaScript and Selenium in Java without specifying a value or ID

The AngularJs project is currently experiencing issues when trying to function as a single page web application

Step-by-step guide on importing popper.js

What is the best way to obtain the id of a selected row using JavaScript?