Search code examples
javascriptjquerycsssafaricontenteditable

contenteditable not working in safari but works in chrome

I'm having a strange issue...

This works in chrome as expected but in safari it only gets .. glowing but doesn't react on key input..

this is the method that fires 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 when fired this works as expected... enter image description here

and this is the result in safari.. no reaction to keyboard or mouse selection: enter image description here

Any idea why and how to solve this in safari?

this is the HTML before the method is called : 

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

This is when it's called (at the same time as screenshots)

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

  • Safari has the user-select CSS setting as none by default. You can use:

    [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

    To make it work.