ContentEditable в Firefox создает 2 новых строки вместо 1 - PullRequest
Новая
       27

ContentEditable в Firefox создает 2 новых строки вместо 1

0 голосов
/ 15 октября 2018

Я только что заметил, что div contenteditable в отчетах 1 новая строка как 2 новых строки в Firefox.

Это ошибка или я что-то упустил?

В следующем примере просто введите: 

Hello

World

в contenteditable.

Получение значения с помощью innerText сообщает об этом как: 

Hello



World


const textarea = document.querySelector('#textarea')

textarea.addEventListener('keydown', e => {
  console.log(textarea.innerText)
})
#textarea {
  width: 200px;
  height: 75px;
  outline: 1px solid black;
}
  <div id="textarea" contenteditable="true"></div>

1 Ответ

0 голосов
/ 23 октября 2018

Похоже, что это ошибка в реализации внутреннего текста Firefox.

Новые строки в contenteditable исторически не имели единого мнения о точной реализации.Gecko вставил <br> s, IE и Opera Presto обернули строку в теги <p>, а Webkit и Blink обернули строку в теги <div>.С его старой реализацией, которая использовала теги <br>, Firefox innerText работал просто отлично, именно так, как того требует ваш вопрос.

Однако современные браузеры достигли общего консенсуса ради согласованности.Специально для Firefox MDN указано:

Начиная с Firefox 60, Firefox будет обновлен, чтобы обернуть отдельные строки в элементы <div>, соответствующие поведению Chrome, в современной Opera, Edge и Safari.

Когда современные браузеры вставляют пустую новую строку, они делают это, заключая теги <br> в <div>.Кажется, что реализация Firefox innerText интерпретирует это как две новые строки.

Обходной путь довольно прост.Метод execCommand (неофициальный черновик W3, но поддерживаемый Firefox, и это все, что нам нужно) позволяет вам манипулировать содержимым contenteditable с помощью определенных команд.Одной из таких команд является defaultParagraphSeparator, , которая позволяет указать, использовать ли <div> или <p> в качестве контейнера для строк в вашем contenteditable.

Firefox - и только Firefox - дополнительно реализована поддержка <br> с defaultParagraphSeparator.С этой командой contenteditable ведет себя так же, как и до FF60, то есть вставляет разрывы строк вместо переноса строк в контейнере.

Таким образом, все, что вам нужно сделать, это поместить: 

document.execCommand("defaultParagraphSeparator", false, "br");

в вашем JavaScript.Все версии Firefox будут использовать <br> s вместо контейнеров для новых строк в contenteditable, таким образом, innerText правильно интерпретирует новые строки.И каждый браузер, кроме Firefox, будет игнорировать его.

...