How to remove focus from input field in jQuery?

Question

I am setting the focus on a certain input field when loading a page using the following line:

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

Is there a way that I can undo or remove this focus when hovering over a certain element? (The focus does not have to be reset after leaving this element.)

I couldn't find a function that is the opposite to the above in jQuery or would otherwise work here.

Solution 1

Use .blur().

The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

$("#myInputID").blur(); 

Solution 2

check up blur():

$('#textarea').blur()

source: http://api.jquery.com/blur/

Comments

[user2571510]

Ok, so I think I am doing something wrong here or I described this the wrong way. The element I want to use here has the class navbar (it is a Bootstrap 3 navbar) so I tried the following but this does not work: $('.navbar').on('mouseover', function() { $('#myInputID').blur(); });

[user2571510]

Yes, I did that. If this does not work could I just set the focus on the navbar instead ?

[Milind Anantwar]

@user2571510: try giving alert inside event and see whether it is getting fired or not.

[user2571510]

Yes, the alert shows but it does not remove the focus from the field.

[Milind Anantwar]

@user2571510: do you have duplicate ids in page?? try using $("[id=myInputID]").blur();

[user2571510]

Thanks, no it doesn't look like.

[Milind Anantwar]

Let us continue this discussion in chat.

[Pavan Kotesh]

@MilindAnantwar I need to remove focus but blur() doesn't bubble my div. Is there a way to remove focus and bubble as well?

[Milind Anantwar]

can you reproduce the problem in fiddle?