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 shiftKey Property
The HTML DOM KeyboardEvent shiftKey property is a read-only Boolean property that indicates whether the Shift key was pressed when a keyboard event occurred. It returns true if the Shift key was held down during the event, and false otherwise.
This property is commonly used to detect modified key combinations, such as Shift+Enter for line breaks or Shift+Click for multi-selection functionality.
Syntax
Following is the syntax for accessing the shiftKey property −
event.shiftKey
Return Value
The property returns a Boolean value −
-
true− The Shift key was pressed during the keyboard event -
false− The Shift key was not pressed during the keyboard event
Example − Basic Shift Key Detection
Following example demonstrates how to detect when the Shift key is pressed along with other keys −
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent shiftKey Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Shift Key Detection</h2>
<p>Type in the input field below. Press any key with or without Shift:</p>
<input type="text" id="textInput" placeholder="Type here..." style="padding: 10px; width: 300px;">
<div id="output" style="margin-top: 15px; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9;">
Press any key to see Shift key status...
</div>
<script>
document.getElementById("textInput").addEventListener("keydown", function(event) {
var output = document.getElementById("output");
var keyPressed = event.key;
var shiftStatus = event.shiftKey;
output.innerHTML = "Key pressed: <strong>" + keyPressed + "</strong><br>" +
"Shift key pressed: <strong>" + (shiftStatus ? "Yes" : "No") + "</strong>";
});
</script>
</body>
</html>
The output displays the pressed key and whether the Shift key was held down −
Key pressed: a Shift key pressed: No (When Shift+A is pressed) Key pressed: A Shift key pressed: Yes
Example − Shift Key with Special Actions
Following example shows how to perform different actions based on whether Shift is pressed −
<!DOCTYPE html>
<html>
<head>
<title>Shift Key Special Actions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Text Editor with Shift Functionality</h2>
<p>Instructions:</p>
<ul>
<li>Press Enter: Add new line</li>
<li>Press Shift+Enter: Add line break without new paragraph</li>
</ul>
<textarea id="editor" rows="6" cols="50" style="padding: 10px;"></textarea>
<div id="status" style="margin-top: 10px; font-weight: bold; color: #666;">Ready to type...</div>
<script>
document.getElementById("editor").addEventListener("keydown", function(event) {
var status = document.getElementById("status");
if (event.key === "Enter") {
if (event.shiftKey) {
status.textContent = "Shift+Enter pressed: Line break added";
status.style.color = "#007bff";
} else {
status.textContent = "Enter pressed: New paragraph";
status.style.color = "#28a745";
}
} else if (event.shiftKey) {
status.textContent = "Shift+" + event.key + " combination detected";
status.style.color = "#dc3545";
} else {
status.textContent = "Typing: " + event.key;
status.style.color = "#666";
}
});
</script>
</body>
</html>
The status message changes based on different key combinations, highlighting when Shift is used with other keys.
Example − Multiple Modifier Keys
Following example demonstrates checking multiple modifier keys including shiftKey −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Modifier Keys</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modifier Key Combinations</h2>
<p>Press keys with different modifier combinations:</p>
<input type="text" id="modifierInput" placeholder="Press keys here..." style="padding: 10px; width: 300px;">
<div id="modifierStatus" style="margin-top: 15px; padding: 15px; border-radius: 5px; background-color: #f8f9fa;">
<strong>Modifier Status:</strong><br>
Shift: <span id="shiftStatus">No</span><br>
Ctrl: <span id="ctrlStatus">No</span><br>
Alt: <span id="altStatus">No</span><br>
Key: <span id="keyPressed">None</span>
</div>
<script>
document.getElementById("modifierInput").addEventListener("keydown", function(event) {
document.getElementById("shiftStatus").textContent = event.shiftKey ? "Yes" : "No";
document.getElementById("ctrlStatus").textContent = event.ctrlKey ? "Yes" : "No";
document.getElementById("altStatus").textContent = event.altKey ? "Yes" : "No";
document.getElementById("keyPressed").textContent = event.key;
// Change colors based on modifier states
document.getElementById("shiftStatus").style.color = event.shiftKey ? "#007bff" : "#6c757d";
document.getElementById("ctrlStatus").style.color = event.ctrlKey ? "#007bff" : "#6c757d";
document.getElementById("altStatus").style.color = event.altKey ? "#007bff" : "#6c757d";
});
</script>
</body>
</html>
The interface shows real-time status of all modifier keys, with active modifiers highlighted in blue.
Common Use Cases
The shiftKey property is frequently used in the following scenarios −
- Text Selection − Extending selections with Shift+Arrow keys
- Multi-Selection − Selecting multiple items with Shift+Click
- Form Navigation − Reverse tab order with Shift+Tab
- Text Formatting − Creating line breaks with Shift+Enter
- Custom Shortcuts − Implementing application-specific key combinations
Browser Compatibility
The shiftKey property is supported across all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the standard DOM KeyboardEvent interface and works consistently across platforms.
Conclusion
The KeyboardEvent shiftKey property provides a reliable way to detect when the Shift key is pressed during keyboard events. It enables developers to create sophisticated keyboard interactions and shortcuts by combining it with other keys. This Boolean property is essential for building responsive user interfaces that support advanced keyboard navigation and input methods.
160 Views
