Preventing blur when user clicks on specific div not working in Firefox

Question

I am using jquery to keep the focus on a text box when you click on a specific div. It works well in Internet Explorer but not in Firefox. Any suggestions?

v         


        

Answer 1

Point to note: the focus() method on a jquery object does not actually focus it: it just cases the focus handler to be invoked! to actually focus the item, you should do this:

var clickedDiv = false;
$('input').blur( function() {
    if(clickeddiv)  {
        $('input').each(function(){this[0].focus()});
    }
}
$('div').mousedown(function() { clickedDiv = true; })
        .mouseup(function() { clickedDiv = false });

Note that I've used the focus() method on native DOM objects, not jquery objects.

This is a direct (brute force) change to your exact code. However, if I understand what you are trying to do correctly, you are trying to focus an input box when a particular div is clicked when that input is in focus.

Here's my take on how you would do it:

var inFocus = false;
$('#myinput').focus(function() { inFocus = true; })
             .blur(function() { inFocus = false; });
$('#mydiv').mousedown(function() {
    if( inFocus )
        setTimeout( function(){ $('#myinput')[0].focus(); }, 100 );
}

Point to note: I've given a timeout to focussing the input in question, so that the input can actually go out of focus in the mean time. Otherwise we would be giving it focus just before it is about to lose it. As for the decision of 100 ms, its really a fluke here.

Cheers,

jrh

---

EDIT in response to @Jim's comment

The first method probably did not work because it was the wrong approach to start with.

As for the second question, we should use .focus() on the native DOM object and not on the jQuery wrapper around it because the native .focus() method causes the object to actually grab focus, while the jquery method just calls the event handler associated with the focus event.

So while the jquery method calls the focus event handler, the native method actually grants focus, hence causing the handler to be invoked. It is just unfortunate nomenclature that the name of this method overlaps.

Answer 2

I resolved it by simply replace on blur event by document.onclick and check clicked element if not input or div

var $con = null; //the input object
var $inp = null; // the div object

function bodyClick(eleId){
    if (eleId == null || ($inp!= null && $con != null && eleId != $inp.attr('id') &&   
            eleId != $con.attr('id'))){
        $con.hide();
    }
}
function hideCon() { 
    if(clickedDiv){
         $con.hide();
    }

}
function getEl(){
var ev = arguments[0] || window.event,
origEl = ev.target || ev.srcElement;
eleId = origEl.id;
bodyClick(eleId);
}
document.onclick = getEl;

hope u find it useful