Когда вы нажимаете Enter на элементе contentEditable
, каждый браузер обрабатывает полученный код по-разному: Firefox вставляет ярлык BR, Chrome вставляет тег DIV, в то время как Internet Explorer вставляет тег..
Я отчаянно искал решение, по крайней мере, использовать BR или P для всех браузеров, и наиболее распространенным ответом было следующее:
вставка тега BR:
$("#editableElement").on("keypress", function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
Но это не работает, потому что кажется, что браузеры не знают, как установить каретку после <br>
, а это значит, что следующее не делает ничего полезного (особенно если вы нажмете enter, когда каретка помещается в конце текста):
range.setStartAfter(br);
range.setEndAfter(br);
Некоторые люди скажут: используйте double <br><br>
, но это приводит к разрыву в двух строках, когда вы нажимаете enter внутри текста node.
Другие скажут, что всегда добавить дополнительный <br>
в конец contentEditable, но если у вас есть <div contenteditable><p>text here</p></div>
, и вы поместите курсор в конец текста, тогда нажмите enter, вы получите неправильное поведение.
Поэтому я сказал себе, может быть, мы сможем использовать P вместо BR, а общий ответ:
вставка тега P:
document.execCommand('formatBlock', false, 'p');
Но это тоже не работает.
Как вы можете видеть, все эти решения оставляют желать лучшего. Есть ли другое решение, которое решает эту проблему?