2013-12-06 3 views
7

У меня странный вопрос ...contenteditable не работает в сафари, но работает в хроме

Это работает в хроме, как ожидается, но в сафари он получает только .. светящийся, но не реагирует на клавиши ввода. .

это метод, который запускает текст издания:

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

Это скриншот в хроме, когда обожженного это работает, как ожидалось ... enter image description here

, и это результат сафари. Никакой реакции на выбор клавиатуры или мыши: enter image description here

Любая идея, почему и как решить эту проблему в сафари?

это 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> 

ответ

29

Это кажется немного старый пост. Но у сафари значение user-select css отсутствует как по умолчанию. Вы можете использовать

[contenteditable] 
    -webkit-user-select: text 
    user-select: text 

, чтобы заставить его работать.

+3

Это на самом деле отвечает на вопрос, и это спасло меня целый вечер отчаяния ... плохо себя чувствую, я не могу дать вам больше одного восхождения! – xgrtl

+3

Это на самом деле правильный ответ на вопрос – Marco

+1

Спасибо! Многие пользователи ckeditor найдут это полезным – ebrohman

Смежные вопросы