Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM KeyboardEvent charCode Property
The KeyboardEvent charCode property returns the Unicode character code of the character that was pressed during a keyboard event. It provides a numeric representation of the character, which can be useful for character validation and input processing.
Note − The charCode property is deprecated. Use the key property instead for modern applications, as it provides more accurate and readable results.
Syntax
Following is the syntax for accessing the charCode property −
event.charCode
Return Value
The charCode property returns a number representing the Unicode character code of the pressed key. For non-character keys (like arrow keys, function keys), it returns 0.
How It Works
The charCode property works specifically with the keypress event and only returns values for printable characters. Here are some common character codes −
Letters − 'a' = 97, 'A' = 65, 'z' = 122, 'Z' = 90
Numbers − '0' = 48, '1' = 49, '9' = 57
Special characters − Space = 32, '!' = 33, '@' = 64
Example − Character Validation
Following example demonstrates how to use the charCode property to validate specific character input −
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent charCode</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
input[type="text"] {
padding: 8px;
margin: 10px;
border: 2px solid #ddd;
border-radius: 5px;
}
#divDisplay {
margin: 15px;
padding: 10px;
font-weight: bold;
}
.correct { color: green; }
.incorrect { color: red; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent charCode Example</legend>
<label>Fill in the blank: _ for zebra
<input type="text" id="textSelect" placeholder="Type 'z'" onkeypress="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getEventData(event) {
divDisplay.className = "";
if(event.charCode === 122) { // 'z' character code
divDisplay.textContent = 'Correct! You typed "z" (charCode: 122)';
divDisplay.className = "correct";
} else {
divDisplay.textContent = 'Try again. You typed charCode: ' + event.charCode;
divDisplay.className = "incorrect";
}
textSelect.value = '';
}
</script>
</body>
</html>
The output shows different messages based on the character typed. Typing 'z' displays a success message, while other characters show their respective character codes −
Before typing: Fill in the blank: _ for zebra [Type 'z'] Typing 'z': Correct! You typed "z" (charCode: 122) (green text) Typing 'a': Try again. You typed charCode: 97 (red text)
Example − Character Code Display
Following example shows how to display character codes for any typed character −
<!DOCTYPE html>
<html>
<head>
<title>Character Code Display</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { max-width: 500px; margin: 0 auto; text-align: center; }
input { padding: 10px; font-size: 16px; border: 2px solid #007bff; border-radius: 5px; }
.output { margin: 20px 0; padding: 15px; background-color: #f8f9fa; border-radius: 5px; }
</style>
</head>
<body>
<div class="container">
<h2>Character Code Detector</h2>
<p>Type any character to see its charCode:</p>
<input type="text" id="charInput" onkeypress="showCharCode(event)" placeholder="Type here...">
<div id="output" class="output">Character codes will appear here</div>
</div>
<script>
function showCharCode(event) {
var output = document.getElementById("output");
var char = String.fromCharCode(event.charCode);
var code = event.charCode;
output.innerHTML = "<strong>Character:</strong> '" + char + "'<br>" +
"<strong>Character Code:</strong> " + code;
// Clear input after displaying
setTimeout(function() {
document.getElementById("charInput").value = '';
}, 100);
}
</script>
</body>
</html>
This example displays both the character and its corresponding character code for any key pressed −
Type 'A': Character: 'A', Character Code: 65 Type '5': Character: '5', Character Code: 53 Type '@': Character: '@', Character Code: 64
Browser Compatibility
The charCode property is supported in all major browsers but is deprecated. Modern applications should use the event.key property instead, which returns the actual character or key name as a string rather than a numeric code.
Alternative − Using the key Property
Following example shows the modern approach using the key property −
<!DOCTYPE html>
<html>
<head>
<title>Modern Key Property Example</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
input { padding: 10px; font-size: 16px; margin: 10px; }
.result { margin: 20px; padding: 15px; background: #f0f8ff; border-radius: 5px; }
</style>
</head>
<body>
<h2>Modern Key Detection</h2>
<input type="text" onkeydown="showKey(event)" placeholder="Type any key">
<div id="result" class="result">Press any key to see its value</div>
<script>
function showKey(event) {
var result = document.getElementById("result");
result.innerHTML = "<strong>Key:</strong> " + event.key +
"<br><strong>Code:</strong> " + event.code;
event.target.value = '';
}
</script>
</body>
</html>
The modern approach provides clearer, more readable results −
Press 'a': Key: a, Code: KeyA Press 'Enter': Key: Enter, Code: Enter Press 'Shift': Key: Shift, Code: ShiftLeft
Conclusion
The charCode property returns Unicode character codes for keyboard events, but it is deprecated in favor of the more intuitive key property. While charCode still works for backward compatibility, new projects should use event.key for better readability and future-proofing.
165 Views
