javascript - contenteditable 不适用于 safari 但适用于 chrome

Question

我有一个奇怪的问题...

这在 chrome 中按预期工作，但在 safari 中它只会变得..发光但不会对按键输入使用react..

这是触发文本编辑的方法:

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    
    });

这是在 chrome 中触发时的屏幕截图，按预期工作...

这是在 safari 中的结果.. 对键盘或鼠标选择没有反应:

知道为什么以及如何在 Safari 中解决这个问题吗？

这是调用方法之前的 HTML:

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

这是调用的时候(同时截图)

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

Answer 1

Safari 默认将 user-select CSS 设置为 none。 您可以使用:

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

让它发挥作用。