Как сделать нередактируемый элемент в контейнере с помощью contentEditable? - PullRequest
Новая
       16

Как сделать нередактируемый элемент в контейнере с помощью contentEditable?

1 голос
/ 26 июня 2019

Я пытаюсь сделать редактор, который вставляет специальные типы элементов.Я понял, что если вы установите для contenteditable значение false на элементах внутри него, это не позволит вам печатать внутри него (что хорошо), но он не ставит курсор ни до, ни после, курсор просто исчезает.

Есть ли способ запретить пользователю печатать внутри элемента, но сохранить фокусировку курсора при нажатии на него, как если бы это был обычный текстовый символ? 

div div {
  width: 30px;
  height: 30px;
  background: red;
  display: inline-block;
}

div {background: #ccc}
<div contenteditable="true">
this one will let you type<div></div>inside the red box
</div>

<div contenteditable="true">
this one wont, <div contenteditable="false"></div> but the cursor does nothing when you click inside it now
</div>


<div contenteditable="true">
cant place cursor after this box <div contenteditable="false"></div>
</div>

Вы также не можете щелкнуть в конце текстового блока, если последний блок.

Большая проблема для удобства использования, очень хотелось быисправить это.

Facebook решил эту проблему, но я не могу понять, с js или css:

enter image description here

edit: я обнаружил, что fb меняет свойство caret-color на черное, но после ввода, похоже, оно переходит на позицию вне диапазона, что должно быть сделано с помощью js.Все еще пытаюсь понять, как.

...