Force focus on one element with an exception. (jQuery)

Question

I have two input fields. I want to force the focus on #area no matter where the user clicks unless it is on #input. I've tried something like this, but since input is part of document, it does not work.

$("#area").focus();
$(document).click(function() { $("#area").focus() };
$("#input").click(function() { $("#input").focus() };

Thoughts?

Answer 1

change it to

$("#area").focus();
$(document).click(function() { $("#area").focus() };
$("#input").click(function(e) { e.stopPropagation(); $("#input").focus() };

This will stop the event from bubbling up to the document, and will only be caught by the #input

Answer 2

You need to cancel the event bubbling when clicking on the normal inputs, either by returning false in your event handler, or by calling e.stopPropagation().

I'm not sure if the order in which you assign event handlers matters, but you might try to put the #input event first.

Answer 3

The stopPropogation solution is simpler than what I'm about to suggest, but it's probably worth discussing this other option. In that first function you've got, you might try taking the first argument to the function, which is a jQuery normalized event object:

$(document).click(function(event) { ...

and testing it to see if the target property of the event is your input:

$(document).click(function(event) {
    if(! (event.target == $("#input").get(0)) )
        $("#area").focus();
}