Create a bootstrap dropdown that occurs after pressing specific key
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.
- 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.