Блог

Главная - Вопросы по программированию - Как мне предотвратить наследование тега contenteditable в дочерних элементах?

Как мне предотвратить наследование тега contenteditable в дочерних элементах?

#html #css

#HTML #css

Вопрос:

У меня есть простой <div contenteditable> с a <span> внутри него. Текст внутри <div> Я хочу, чтобы его можно было редактировать, но <span> я не хочу, чтобы пользователи могли редактировать.

Пример:

 #editable {
  background-color: #ccc;
  padding: 5px;
  width: 400px;
  text-align: center;
}

span {
  background-color: green;
  color: white;
  padding: 2px;
  
}  
 <div id="editable" contenteditable>
  Sample text including a <span>FANCY TAG</span> in the middle.
</div>

Желаемый конечный результат — это окно, в котором пользователи могут вводить то, что они хотят, но имеют встроенные теги, которые недоступны для редактирования. Поскольку вы не можете помещать <span> теги внутри <input type="text"> <textarea> блоков or, мне остается использовать <div contenteditable> .

Как мне сделать весь текст внутри <div> редактируемого, кроме <span> ?

Ответ №1:

Добавить contenteditable="false" к вашему span tag , таким образом, это не позволяет пользователю редактировать ваш span tag. 

 #editable {
  background-color: #ccc;
  padding: 5px;
  width: 400px;
  text-align: center;
}

span {
  background-color: green;
  color: white;
  padding: 2px;
  
}
   
 <div id="editable" contenteditable>
  Sample text including a <span contenteditable="false">FANCY TAG</span> in the middle.
</div>

Комментарии:

1. Да, это было бы моим предложением — однако, поскольку диапазон находится в пределах contenteditable div, это не мешает удалению диапазона, по моему опыту, с помощью клавиш delete или backspace .

2. @TonyDuffill да, это правда, но это отключает редактирование содержимого для тега span, как вы просили. И это может быть достигнуто, если мы изменим положение span и скорректируем текст.

3. Отлично работает! Возможность их удаления является дополнительным бонусом, который я хотел бы сохранить.

4. Спасибо, это точно такой же вопрос, который у меня был, и ответ, который я надеялся найти. Я работаю над тем, чтобы позволить опытным пользователям создавать собственное пользовательское тело электронной почты для пользовательских уведомлений, и они могут добавлять «теги», которые по сути являются переменными, которые будут заменены значениями при отправке электронной почты.