CODEWITHSUNDEEP
javascriptjqueryfocussetfocus
user2571510
user2571510

Reputation: 11377

How to remove and re-set focus on input when hovering over other element

I use Bootstrap 3 and have a standard input field that looks as follows on which I set focus via jQuery on pageload:

My Input: <input type="text" class="form-control" id="searchTerm" />

My jQuery: $('#searchTerm').focus();

On the same page I have a Bootstrap navbar and would like to remove the above focus when navigating on the navbar + re-set the focus when leaving the navbar. The reason for this is that otherwise the blinking cursor is overlapping my navbar dropdowns so it is visible in the dropdown background.

My Navbar: 

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header margin-right-30">
          // ...

I guess you can do this using focus / blur events on the class "navbar" but I wasn't sure if and how to realise this. How can I do this properly?

Upvotes: 0

Views: 2238

Answers (1)

Ralph
Ralph

Reputation: 305

You probably want to use jQuery's .hover() and .focus() methods (documentation in links). Note that the .hover() method takes a callback argument which is a function that will be called when the event happens. The .focus method, however, while it can take a callback method, can be called without arguments to simply change the focus to the element left of the dot.

For example you may want to do something like the following:

$('#navBar').hover(function(){
  this.focus();
});

Upvotes: 2

Related Questions