[jQuery] conditionally prevent blur
Hello,
I am working on a function that highlights an input's containing div
when the input receives focus (to help draw focus on a very input
heavy form). The function looks something like this:
function highlightFields (e) {
$(e)
.focus(function () {
$(this).css({"border":"1px solid #003399"});
$(this).parent().css({"background-color": "#CCCCFF"});
$(this).filter(":text").select();
//APPEND BOXESBOX
$(this).parent().append('<div class="boxesBox"></div>');
})
.blur(function () {
$(this).css({"border": "1px solid #999999"});
$(this).parent().css({"background-color": "#CCCCCC"});
//REMOVE BOXESBOX
$(this).parent().children(".boxesBox").remove();
});
}
You will notice that focusing a field also appends the div "boxesBox"
on focus. This box will contain utilities related to the selected
input (like, an "about this field" button). The idea is, the user can
receive immediate feedback based on the input selected.
What I cant figure out is how to prevent the blur function from
happening when (and only when) this "boxesBox" div is clicked on. I've
tried various combinations of one() and unbind() but my mind refuses
to wrap around the situation.
Any suggestions?
Thanks!
~omtay38