Изменить курсор, не отображаемый в Chrome, в контентном

Когда вы открываете эту страницу (см. Live demo) с Chrome:

<span id="myspan" contenteditable=true></span>

CSS:

#myspan { border: 0; outline: 0;}

JS:

$(myspan).focus();

contenteditable span имеет фокус (вы можете начать писать вещи, и вы увидите, что он уже имел фокус), но мы не видим курсор редактирования "I".

Как сделать отображение этого курсора? (Примечание: outline:0 необходимо, а также тот факт, что span пуст, даже без пробела).

Примечание. В Firefox отображается курсор.

Ответы

Ответ 1

Решение заключалось в изменении <span> на <div> (я видел, что это решает многие проблемы contenteditable в других вопросах здесь и там) +, чтобы добавить min-width.

В самом деле, со следующим кодом размер <div> будет 0px x 18px! Это объясняет, почему карет (курсор редактирования) будет скрыт!

HTML

<div id="blah" contenteditable=true></div>

CSS

#blah {
    outline: 0;
    position: absolute;
    top:10px;
    left:10px;
}

JS

$("#blah").focus();

Затем добавив

min-width: 2px;

в CSS позволит отображать каретку, даже с Chrome: http://jsfiddle.net/38e9mkf4/2/

Ответ 2

Проблема заключается в том, что span являются встроенными элементами. Просто добавьте display:block; в свой CSS, и это устранит проблему.

$(myspan).focus();
#myspan {
    border: 0;
    outline: 0;
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="myspan" contenteditable=true></span>

Ответ 3

Я добавил добавление влево и появится курсор.

#myspan
{
    border: 0; 
    outline: 0; 
    min-width: 100px; 
    height: 30px; 
    padding-left: 1px;
}

Демо в jsFiddle

Ответ 4

.cont_edit {
  outline: 1px solid transparent;
}

Ответ 5

Это просто связано с тем, как создается пустая область ContentEditable. Чтобы доказать это не в фокусе, добавьте текст в редактируемый div, а затем удалите его. Когда последний символ исчезнет, ​​курсор исчезнет

Из вопроса Установка позиции каретки на пустой node внутри элемента contentEditable

Модель выбора/диапазона основана на индексах в текстовом контенте, не обращая внимания на границы элементов. Я считаю, что невозможно установить фокус ввода внутри встроенного элемента без текста. Конечно, с вашим примером я не могу установить фокус внутри последнего элемента, нажав или клавиши со стрелками.

Это почти работает, если вы установите каждый интервал на display: block, хотя все еще есть очень странное поведение, зависящее от существования пробела в родительском. Взломать дисплей, чтобы он выглядел inline с помощью трюков, таких как float, inline-block и абсолютное положение, делает IE обрабатывать каждый элемент как отдельное поле редактирования. Относительно расположенные элементы блока рядом друг с другом работают, но это, вероятно, непрактично.

Вы также можете попробовать добавить символ нулевой ширины, например &#8203; 

document.getElementById('myspan').focus();
#myspan {
    border: 0;
    outline: 0;
}
<span id="myspan" contenteditable="true">&#8203;</span>

Ответ 6

Для меня настройка содержания contenteditable div на <br> работает. Я попытался установить его на nbsp;, но это создает дополнительное пространство символов в div до начала редактирования. Итак, я выбираю это:

<div id="blah" contenteditable=true><br></div>

над

<div id="blah" contenteditable=true>nbsp;</div>

Надеюсь, что это поможет.

Ответ 7

Добавьте стиль CSS

min-height: 15px;

вам также может понадобиться

display: block;

к тегу contenteditable="true"

Ответ 8

Я использую Chrome, и ваш код работает нормально.

Попробуйте использовать cursor: text; в своем CSS. См. здесь