Question

Maybe my question sounds a bit generic, so let me be more clear.

I have a textarea that is hidden on blur, to be replaced by another div. To be more specific, the above textarea contains markdown code, and the div contains the parsed version of this code.

Now, I am trying to add a formatting toolbar on top of the textarea, but of course, when I click on that, the blur event is triggered and the textarea is hidden, which is not convenient at all.

So my question is whether it is possible at all to prevent the blur default behaviour only when the toolbar is clicked, and if so what’s the best way to do that.

Answer 1

Edit: My previous solutions didn’t cut it so let’s try with something else. I’m not really fond in binding the document click event but in this case it might be the best solution since it seems that you are coding some kind of WYSIWYG-editor. You can possibly tweak it to use .one instead.

$(document).click(function(e){
    if ($(e.target).closest("#container").length == 0) {
        // Target that was clicked is not inside the container, so we can hide or replace the textarea
        $("textarea").hide();
    }
});

You can try this out on jsFiddle.