1

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?

Community
  • 1
  • 1
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
  • I'm unable to replicate the described issue using Safari on Mavericks. Also, issues like this are generally resolved by using `mousedown` with `e.preventDefault();`. – Ohgodwhy Jun 14 '14 at 00:39
  • @Ohgodwhy I have this on Safari on windows (5.1) and also on ipad, iphone. You are right, mousedown fixed it. Even without prevent default. – Salvador Dali Jun 14 '14 at 00:59

1 Answers1

1

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

$('#ID').mousedown(function(){
    $(this).text('');
})
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753