Contenteditable doesn't work in safari, but works in chrome

Question

I have a strange problem ...

This works in chrome, as expected, but in safari it only gets ... glows, but does not respond to key input.

this is the method that launches the text edition:

var namebloc = $(event.currentTarget).find('.column_filename'); var oldvalue = namebloc.html(); namebloc.attr('contentEditable', true).focus(); document.execCommand('selectAll',false,null); namebloc.blur(function() { $(this).attr('contentEditable', false).unbind( "keydown" ).unbind( "blur" ); var newvalue = $(this).html().replace('"','&quot;').replace(/(<([^>]+)>)/ig,""); console.log(newvalue); }); namebloc.keydown(function(e) { if(e.keyCode==27){ $(this).html(oldvalue);}//escape if(e.keyCode==13){ $(this).blur(); }//enter }); 

This is a screenshot in chrome at startup, it works as expected ...

and this is the result of a safari. No reaction to keyboard or mouse selection:

Any idea why and how to solve this in safari?

this is HTML before calling the method:

 <span field="filename" class="column_filename" style="width:763px;">eiffel (2).JPG</span> 

This is when it calls (at the same time as the screenshots)

 <span field="filename" class="column_filename" style="width:763px;" contenteditable="true">eiffel (2).JPG</span> 

Answer 1

This seems to be a little old post. But safari has the value of user-select css as nobody by default. you can use

 [contenteditable] -webkit-user-select: text user-select: text 

for it to work.