contenteditable不在safari工作，但在chrome工作

Question

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

这可以像预期的那样在chrome中运行，但在safari中它只会...发光但不会对键输入做出反应..

这是触发文本版本的方法：

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中的结果..对键盘或鼠标选择没有反应：

知道为什么以及如何在野生动物园中解决这个问题？

这是调用方法之前的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;
}

让它发挥作用。

Answer 2

在Safari中，尽管也基于WebKit，但是单击具有select A.id from A a left join a.foreignId b where ... 属性集的元素时，行为会有所不同。 Chrome似乎可以取消该CSS属性的设置，并防止将任何焦点移到所单击的元素上（感谢您继续开发现代而又明智的浏览器Google），而Safari对于该CSS属性却没有任何帮助，而是将焦点放在了还是点击了元素。

Safari中的一种解决方案是使用适当的html button元素，但这从样式的角度来看很糟糕。

一个更好的解决方案是捕获mousedown事件（单击时触发Mouse类型事件的第一个事件），并捕获该事件的user-select。它可以在任何版本的Safari中使用。

例如

preventDefault()