Contenteditable = false внутри contenteditable = true блок все еще доступен для редактирования в IE8

У меня есть следующий HTML, намереваясь убедиться, что внутренний span не редактируется. Это работает в других браузерах, но не в IE8.

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="false">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Здесь JSFiddle, чтобы проиллюстрировать точку (используйте IE8 для ее проверки): http://jsfiddle.net/haxhia/uUKPA/3/.

Как я могу убедиться, что IE8 правильно относится к этому?

Ответ 1

Хорошо, я уже нашел ответ, похожий на то, как был обнаружен пенициллин.

Видите ли, играя с этим кодом, я по ошибке установил contenteditable на true для span и вуаля! Это сработало!

Итак, чтобы сделать span НЕконтентабельным внутри contenteditable div, вы просто устанавливаете его атрибут contenteditable в true!

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Здесь файл для демонстрации (используйте IE8, чтобы открыть его): https://codepen.io/hgezim/pen/qMppLg.

Наконец, я не публиковал вопрос, чтобы получить голоса (хотя они не пострадали бы!), Но, поскольку решение было настолько нелепым, и я не нашел его здесь, я подумал, что кто-то может посчитать этот совет экономящим время.

Ответ 2

Проблема с contenteditable = "true" внутри contenteditable = "true" (сделать ее недоступной для редактирования) в IE заключается в том, что двойной щелчок по внутреннему элементу делает его редактируемым

Решение

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

содержимое дочернего тега не будет доступно для редактирования

    <ul contenteditable="true">
        <li>By default, this content is editable via its 
        inherited parent elements value.</li>

    <li contenteditable="false" ><span contenteditable="false">This content is     
    <b>not</b> 
    editable for sure</span></li>
    </ul>

Пример JSFiddle

Ответ 3

Я застрял с той же проблемой сегодня и после некоторого времени попытался найти решение, которое работает для меня в IE. Добавьте слушатель события щелчка к дочернему contenteditable элементу. В обработчике событий выполните следующие действия:

 document.querySelector('.simulated-icon').addEventListener('click', function(evt){
    evt.stopPropogation;
    evt.preventDefault;
    return false;
 });

<div class="simulated-icon"><span>Icon text</span></div>

Ответ 4

Хорошо, я нашел это.

Мне просто нужно было добавить атрибут contenteditable="false" к каждому identifier_n.

Таким образом, я могу сохранить div, оборачивая весь мой контент с помощью contenteditable="true", но выбрать, какие элементы не наследуют это свойство. И мои ряды правильно заполняются таким образом

УРА!!!