Я прочитал много вопросов и ответов от stackoverflow, но пока не нашел ответа на мою проблему. Я хотел бы установить позицию каретки внутри дочернего узла в contenteditable div, в частности, я хочу поместить курсор в начало дочернего узла.
Вот иллюстрация, где вы можете следовать вдоль : http://jsfiddle.net/sarkiroka/zgx4njtr/
В приведенном выше примере я добавил теги :before и :after, чтобы лучше проиллюстрировать позиции, которые в настоящее время недоступны с помощью клавиатуры или нажатия, они не должно влиять на окончательное решение.
А вот пример разметки, если jsfiddle больше не будет доступен:
<div contenteditable=true>123<b>567</b>890</div>
Я хочу установить позицию курсора между 3 и 5. Я ожидаю, что браузеры отобразят для этого 2 позиции: первая - «после 3», которая находится за пределами тега <b>, а вторая - «до 5», которая находится в пределах <b>. В первом случае я мог писать с нормальным весом шрифта, а во втором - жирным шрифтом.
Что бы я ни пытался сделать, чтобы текст в позиции «до 5» был жирным, я всегда получаю текст в нормальный вес шрифта.
Мой сценарий: я щелкаю в этой области редактирования между 5 и 6. После этого я нажимаю стрелку влево на клавиатуре. В этой новой позиции я ожидаю, что смогу печатать жирным шрифтом, но в результате получится текст с обычным весом шрифта.
Я ожидаю, что предполагаемое поведение будет следующим:
- щелкните между 5 и 6.
- нажмите стрелку влево один раз: курсор вставляется между 3 и 5 (набирается жирным шрифтом)
- нажмите стрелку влево второй раз: курсор между 3 и 5 (печатание теперь в норме)
- нажмите стрелку влево в третий раз: символ вставки находится между 2 и 3 (ввод по-прежнему в норме)
- нажмите стрелку влево в четвертый раз: символ вставки между 1 и 2 (набор текста все еще нормальный)
Интересно, что это работает, когда я устанавливаю <b> на display:block, но не когда на display:inline или display:inline-block, и я хотел бы сохранить элемент с его исходным свойством display.
Я ищу решение, которое работает в Chrome, в настоящий момент не заинтересованное никакими другими браузерными решениями.
Кроме того, я хотел бы видеть идеи vanilla css / js, н не ссылки на библиотеки.