Добавлять разрыв строки только в textContent или innerText - в Chrome - PullRequest
9 голосов
/ 17 февраля 2012

Это сложный вопрос! Я работаю с contentEditable в Chrome, и у меня возникла проблема с таянием головы. Когда я нажимаю клавишу возврата, Chrome вставляет новый div в innerHTML. Это хорошо и денди. Проблема в том, что разрыв строки нигде не встречается в текстовом контенте div. Мне действительно нужно найти способ добавить разрыв строки к textContent в том же месте, что и разрыв div в innerHTML.

Есть идеи?

UPDATE:

Я могу использовать innerText, но тогда разрывы строк появляются, когда загрузки страниц игнорируются. Мне нужна последовательность по одному из этих методов. Другими словами, мне нужен textContent для отображения вновь введенных разрывов строк или innerText для отображения разрывов строк, которые существовали при загрузке страницы.

Вот обновленная демоверсия:

function checkit() {
  var c1 = document.getElementById('c1')
  alert("TEXTCONTENT:\n" + c1.textContent + "\n\nINNERTEXT:\n" + c1.innerText + "\n\nINNERHTML:\n" + c1.innerHTML)
}
div {padding: 20px; border-bottom: 1px solid #CCC;}
<div><a href="#" onclick="checkit()">check it</a></div>

<div contentEditable="true" id="c1">click inside this <b>div</b>,
press return and then press <b>check it</b> above</div>

Ответы [ 2 ]

5 голосов
/ 17 февраля 2012

Это потому, что textContent не знает стиля. В результате, например, отображается скрытый контент.

Измените c1.textContent на c1.innerText и отобразится разрыв строки.

4 голосов
/ 17 февраля 2012

Я решил эту проблему, загрузив разные переменные для каждой ситуации:

При загрузке страницы я использую textContent, которая сохраняет разрывы строк без изменений.Когда пользователь начинает печатать, я использую innerText, который распознает вставленные разрывы страниц.Простое утверждение if сделает свое дело!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...