contenteditable不在safari工作，但在chrome工作 [英] contenteditable not working in safari but works in chrome

问题描述

我遇到了一个奇怪的问题......

I'm having a strange issue...

这可以按照预期在Chrome中运行，但在safari中它只会...发光但不会对键做出反应输入..

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

这是Chrome中的屏幕截图，当它按预期工作时...

This is a screenshot in chrome when fired this works as expected...

这是safari中的结果。 。对键盘或鼠标选择没有反应：

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

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

Any idea why and how to solve this in safari?

这是调用方法之前的HTML：

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>

推荐答案

Safari拥有用户 - 默认情况下，选择 CSS设置为无。
您可以使用：

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

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

使其正常工作。

这篇关于contenteditable不在safari工作，但在chrome工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！