Search code examples
javascriptjqueryhtmlsafaricontenteditable

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?

Solution

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

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