How to trigger a Bootstrap dropdown when pressing tab key

Question

Is it possible to open a Bootstrap dropdown by pressing tab? The input box in the snippet below is only for example. What I want to happen after the page loads, input box is given the focus. Then when I press tab a drop down will occur.






  
    Email address
    
    We'll never share your email with anyone else.
  


  
    Dropdown link
  

  
    Action
    Another action
    Something else here

user_3877838 · Answer

Not sure if i understands your question correctly, is this what you are searching for?

So when you are in the input field and press the TAB button, the dropdown-menu will open.

$('#exampleInputEmail1').focus();

$('input[name=input]').on('keydown', function(evt) {
  if (evt.key === 'Tab') {
    evt.preventDefault();
    if ($('.dropdown').find('.dropdown-menu').is(":hidden")) {
      $('.dropdown-toggle').dropdown('toggle');
    }
  }
});







  Email address
  
  We'll never share your email with anyone else.



  
    Dropdown link
  

  
    Action
    Another action
    Something else here

user_13368658 · Answer

Add a div nav nav-tabs to parent of dropdown items also add attribute data-toggle="tab" to each dropdown items.then active class to active the tab item. Then,


 
   // id given as first dropdown item.
   --------- first tab content here-------------------
 
 
   // id given as second dropdown item.
   --------- second tab content here-------------------
 
 and so on,

One thing remember add active show classes first item to show the tab item.







 
  
   Email address :
   
   We'll never share your email with anyone else.
  
 

 
  
   Phone number :
   
   We'll never share your phone number with anyone else.
  
 

 
  
   Name :
   
   We'll never share your name with anyone else.
  
 



 
  Click Here
 

 
  
   Email
   Phone
   Name

How to trigger a Bootstrap dropdown when pressing tab key

2 Answers