How to inactivate contentEditable

Question

I have a webpage with an img. Each time the user clicks on the img, it will generate a span tag with the contentEditable attribute set to true.

My problem is that if the user clicks on the img to add a span, clicks on the span (thus activating the editable zone), then clicks back on the img, it will add another editable span (desired effect) but it will also leave the first span in edit mode.

How can I change back the editable span into a normal span?

Answer 1

You can remove the contenteditable attribute and the focus with jQuery like this:

$('span#id').removeAttr('contenteditable').blur();

If you want to style all spans that can be edited you can do it like this in CSS:

span[contenteditable] { } /* editable */