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 Kbd Object
The HTML DOM Kbd object represents the <kbd> element in the document. The <kbd> element is used to define keyboard input and displays text in a monospace font by default, indicating that the text represents user input from a keyboard.
Syntax
Following is the syntax to create a <kbd> element using JavaScript −
var kbdObject = document.createElement("KBD");
You can also access an existing <kbd> element using −
var kbdObject = document.getElementById("kbdId");
Properties
The Kbd object inherits all the standard properties and methods from the HTMLElement interface. Common properties include −
-
innerHTML− Sets or returns the HTML content inside the kbd element -
textContent− Sets or returns the text content of the kbd element -
style− Sets or returns the CSS style declaration for the element
Creating a Kbd Element
Following example demonstrates how to create a <kbd> element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Creating Kbd Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Click the button to create a kbd element:</p>
<button onclick="createKbd()">Create Kbd Element</button>
<div id="result"></div>
<script>
function createKbd() {
var kbdObject = document.createElement("KBD");
kbdObject.textContent = "Ctrl + C";
document.getElementById("result").appendChild(kbdObject);
}
</script>
</body>
</html>
The output shows the kbd element with monospace font styling −
Click the button to create a kbd element: [Create Kbd Element] After clicking: Ctrl + C (displayed in monospace font)
Interactive Kbd Example
Following example shows how to create kbd elements dynamically based on user input −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Kbd Object</title>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
input[type="text"] {
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="button"] {
padding: 8px 16px;
margin: 5px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
min-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<h2>Kbd Object Demo</h2>
<label for="keyInput">Enter keyboard shortcut: </label>
<input id="keyInput" type="text" placeholder="e.g., Ctrl + S" value="Ctrl + S">
<input type="button" onclick="addKbd()" value="Add Kbd Element">
<input type="button" onclick="clearOutput()" value="Clear">
<div id="output"></div>
</div>
<script>
function addKbd() {
var input = document.getElementById("keyInput");
var output = document.getElementById("output");
if (input.value.trim() !== "") {
var kbdObject = document.createElement("KBD");
kbdObject.textContent = input.value;
kbdObject.style.margin = "5px";
kbdObject.style.padding = "2px 4px";
kbdObject.style.backgroundColor = "#f1f1f1";
kbdObject.style.border = "1px solid #ccc";
kbdObject.style.borderRadius = "3px";
output.appendChild(kbdObject);
output.appendChild(document.createTextNode(" "));
}
}
function clearOutput() {
document.getElementById("output").innerHTML = "";
}
</script>
</body>
</html>
This example creates styled kbd elements showing keyboard shortcuts. Each click adds a new kbd element to the output area.
Accessing Existing Kbd Elements
You can also work with existing <kbd> elements in the DOM −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Kbd Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Press <kbd id="shortcut1">Ctrl + Z</kbd> to undo or <kbd id="shortcut2">Ctrl + Y</kbd> to redo.</p>
<button onclick="modifyKbd()">Modify Kbd Elements</button>
<button onclick="resetKbd()">Reset</button>
<script>
var originalTexts = ["Ctrl + Z", "Ctrl + Y"];
function modifyKbd() {
var kbd1 = document.getElementById("shortcut1");
var kbd2 = document.getElementById("shortcut2");
kbd1.textContent = "Cmd + Z";
kbd1.style.backgroundColor = "#ffe6e6";
kbd2.textContent = "Cmd + Y";
kbd2.style.backgroundColor = "#ffe6e6";
}
function resetKbd() {
var kbd1 = document.getElementById("shortcut1");
var kbd2 = document.getElementById("shortcut2");
kbd1.textContent = originalTexts[0];
kbd1.style.backgroundColor = "";
kbd2.textContent = originalTexts[1];
kbd2.style.backgroundColor = "";
}
</script>
</body>
</html>
This example shows how to access and modify existing kbd elements. The "Modify" button changes the shortcuts from Ctrl to Cmd and adds background color.
Common Use Cases
The kbd element is commonly used in the following scenarios −
- Documentation − Showing keyboard shortcuts in software manuals
- Tutorials − Indicating keys to press in step-by-step guides
- Form instructions − Describing keyboard navigation options
- Game controls − Displaying key mappings for game controls
Conclusion
The HTML DOM Kbd object provides a semantic way to represent keyboard input in web documents. It can be created dynamically using JavaScript's createElement() method and styled with CSS. The kbd element is essential for creating clear, accessible documentation that indicates user keyboard interactions.
157 Views
