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

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

31 голосов
/ 23 сентября 2011

У меня есть следующий 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 также правильно это обрабатывает?

Ответы [ 3 ]

35 голосов
/ 23 сентября 2011

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

Видите ли, играя с этим кодом, я по ошибке установил 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.

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

18 голосов
/ 08 марта 2012

Проблема с 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

1 голос
/ 11 марта 2019

Я застрял с той же проблемой сегодня и после некоторого времени пытался найти решение, которое работает для меня в 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>

Как вы можете видеть здесь, возвращая false при прослушивании события click для дочернего содержимого, доступного для редактирования, говорит IE о запрете редактирования.Это работает, если на родительском узле есть событие click, и мы проверяем, щелкается ли целевой дочерний узел в приемнике событий.Удачи.

...