Question

I am attempting to make a simple, light editor in HTML5 but I do not want to have to decide when it should be enabled or not, I want the browser to decide.

Is there a way to tell when a element with the “contenteditable” field is selected and editable?

Is there a way to tell when the user deselects the element with the “contenteditable” field (i.e. when the user clicks outside of the div).

I would prefer a build’t in way. I know you can check if the first one using a click command such as

jQuery('[contenteditable]').click(function(e) { ... });

and you could just listen to all clicks and if it is not on the currently selected contenteditable div it could be considered as deselected but this is hackish and I do not like it.

So, is there a better way?

Answer 1

$(".editableDiv").on({
     focus: function(e) {/*on entry into div*/},
     blur: function(e) {/*on leaving the div*/}
});