Редактирование в div contenteditable

Question

Подскажите пожалуйста, как я могу сделать элемент <span></span> заблокированным для редактирования. Редактировать нужно только информацию в <div></div> и что бы курсор был помещен за <span></span>.

#text {
  width: 100px;
  height: 50px;
  border: 1px solid;
}

#text span {
  background: red;
  width: auto;
  display: inline-block;
  margin-right: 5px;
  padding: 5px;
  border-radius: 3px;
  color: #fff;
}

<div id="text" contenteditable="true">
  <span>Текст</span>
</div>

Answer 1

Можно span присвоить атрибут contenteditable="false", и в таком случае его нельзя будет редактировать, однако так как он находиться внутри <div contenteditable="true"> - его можно удалить из вне. Это никак не изменить.

#text {
  width: 100px;
  height: 50px;
  border: 1px solid;
}

#text span {
  background: red;
  width: auto;
  display: inline-block;
  margin-right: 5px;
  padding: 5px;
  border-radius: 3px;
  color: #fff;
}

<div id="text" contenteditable="true">
  <span contenteditable="false">Текст</span>
  &nbsp;
</div>

БЛОГ НА HUSL

Редактирование в div contenteditable

Ответы (1 шт):