Caret внутри contenteditable div на Chrome

Question

Я использую расширенный элемент управления div, и когда пользователь сначала щелкает внутри этого элемента управления, я хочу удалить весь текст и поместить каретку в начале. Пока мой код работает с IE, Opera и Firefox, но в Chrome кажется, что карет не появляется там, где я пытаюсь его установить. Мой код выглядит следующим образом:

<div id="mydiv" runat="server" contenteditable="true"> 
    <div id="innerDiv" runat="server"> 
     <span onclick="javascript:DisableClick();">text I want to delete on first click</span> 
    </div> 
</div> 

function DisableClick() 
{ 
    document.getElementById("<%=innerDiv.ClientID %>").innerHTML = ""; 
    if(document.createRange) 
    { 
     var range = document.createRange(); 
     range.selectNodeContents(document.getElementById("<%=innerDiv.ClientID %>")); 
     range.collapse(false); 
     var selection = window.getSelection(); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

Удаление текста заставляет карет полностью исчезнуть в Chrome. Однако странно, что если вместо того, чтобы устанавливать innerHTML для div в пустую строку, я указываю некоторый текст, например document.getElementById ("<% = внутреннийDiv.ClientID%>"). InnerHTML = "a"; отображается каретка.

Любые идеи, почему? Благодаря!

Answer 1

Установите стиль вашего внутреннего контейнера на display:inline или display:inline-block или используйте SPAN вместо DIV. Элементы DIV отображаются как «блок» по умолчанию, а Chrome не отображает каретку в элементах редактирования, доступных для редактирования, без текстового содержимого.

Answer 2

У меня была проблема с тем, что каретка не появлялась в пустых строках на Chrome в contenteditable и не совсем сексуальное исправление, которое я выяснил, чтобы разместить div внутри div contenteditable и внести все изменения в вон тот. По какой-то причине появляется каретка. Но, конечно, этот div может быть «случайно» удален пользователем.

У Chrome, похоже, есть куча этих ошибок.