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-selectCSS设置none.您可以使用:

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

使它工作.