Salvador Dali Salvador Dali - 1 month ago 10
Javascript Question

Losing focus in contenteditable in safari

I have a strange behaviour with

contenteditable
in safari. My content editable lose focus when I click on the element.

<h1 contenteditable="true" id="authoringTitle">Title</h1>
$('#authoringTitle').click(function(){
$(this).text('');
})


As you click on it in chrome, you can edit this field right away. In safari it is loosing focus and I have to click twice. JSFiddle is available.

I tried
$(this).focus();
$(this).contents().focus();
$(this).attr('contenteditable', "true").focus()
from various questions on SO like this and this but with no luck.

How can I fix it, and what is the reason for this?

Answer

As I posted in the comment, mousedown solves the problem:

$('#ID').mousedown(function(){
    $(this).text('');
})