Dropdowns are a set of links or a list that is displayed on clicking a button or on a keyboard event. Bootstrap also comes up with a framework to implement dropdown menus. But the default bootstrap dropdown event occurs only with a mouse click.
In this article, we are going to see how to overwrite this default feature and make the bootstrap dropdown event occur after pressing a specific key.
Let’s see the step-by-step implementation:
Step 1: Add the HTML code to create a button that shows the Dropdown
- Link the bootstrap latest minified CSS to the HTML document.
- Add the bootstrap dropdown component framework into the HTML code.
- HTML code creates the dropdown menu perfectly, but the dropdown event occurs with just by a click by default. To perform this event on a key press, we have to add our additional JavaScript code using a script tag.
Step 2: Add the JavaScript code to make the dropdown occur
- Create a variable and take the key code of the specific key as input.
- Create a function named activateDropdown() that will show the dropdown menu when called. Inside that function, we select the id named #myDropdown and toggled the state of all the classes (dropdown elements) residing inside that div. Here toggling the state simply means hiding it if it is shown and showing it if it is hidden.
- Call the function when our specific key is pressed.
Example: This example shows the above-explained approach. Inside the output video, at first, we entered the key code of the key “Enter” which is equal to 13, then whenever we hit enter into the keyboard the dropdown event occurs. We can see that the mouse cursor is also fixed when the dropdown event occurred.
<!DOCTYPE html> <html>
<head>
<!--Bootstrap Latest Minified Css-->
<link rel="stylesheet" href=
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<!--Bootstrap Framework to create a dropdown-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" id="myDropdown" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
</div>
</div>
<script>
// Create a variable and take the
// key-code of the specific key as
// an input prompt
let keyToShow = prompt("Please enter the "
+ "key code, After pressing that key "
+ "dropdown will occur");
/* Create a function named activateDropdown()
that will show the dropdown menu when called.
Inside that function we selected the id named
#myDropdown and toggled the state of all the
classes (dropdown elements) residing inside
that div */
function activateDropdown() {
document.getElementById("myDropdown")
.classList.toggle("show");
}
// Call the function when our specific
// key is pressed
document.addEventListener('keydown', function(event) {
if (event.keyCode == keyToShow) {
activateDropdown();
}
});
</script>
</body>
</html>
|
Output: