Skip to content
Related Articles

Related Articles

Create a bootstrap dropdown that occurs after pressing specific key
  • Last Updated : 31 Dec, 2020

Dropdowns are a set of links or a list which 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 by 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 Dropdown

  • Link the bootstrap latest minified CSS to the HTML document.
  • Add the bootstrap dropdown component framework into the HTML code.
  • HTML code create the dropdown menu perfectly, but the dropdown event occurs on 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 an 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 to hide it if it is shown and show it if it is hidden.
  • Call the function when our specific key is pressed.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  
    <!-- JavaScript Code to perform the task-->
    <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>

chevron_right


Output:

Explanation: 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.

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :