Я нашел этот скрипт здесь, и он, кажется, немного помогает «багам» с contenteditable и переносами строк, но все еще происходит что-то напуганное.
var input = $( '#input' )[0];
$( input ).keypress( function ( e ) {
var sel, node, offset, text, textBefore, textAfter, range;
// the Selection object
sel = window.getSelection();
// the node that contains the caret
node = sel.anchorNode;
// if ENTER was pressed while the caret was inside the input field
if ( node.parentNode === input && e.keyCode === 13 ) {
// prevent the browsers from inserting <div>, <p>, or <br> on their own
e.preventDefault();
// the caret position inside the node
offset = sel.anchorOffset;
// insert a '\n' character at that position
text = node.textContent;
textBefore = text.slice( 0, offset );
textAfter = text.slice( offset ) || ' ';
node.textContent = textBefore + '\n' + textAfter;
// position the caret after that new-line character
range = document.createRange();
range.setStart( node, offset + 1 );
range.setEnd( node, offset + 1 );
// update the selection
sel.removeAllRanges();
sel.addRange( range );
}
});
#input {
border: 3px solid #07c;
width: 300px;
height: 200px;
white-space: pre;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contentEditable id="input"></div>
Просто пример, чтобы попытаться воссоздать то, о чем я говорю:
Тест 1: В Firefox (яна Mac), попробуйте написать 'test' в div и нажмите enter (пробел добавляется в конце, но оставьте курсор, где он есть). Напишите 'test' снова в новой строке. Установите курсор в начале элемента div и напишите «test», а затем введите «enter». Установите каретку в конце div после пробела и нажмите ввод. НЕТ разрыва строки.
Тест 2: Запишите test
, нажмите cmd + a (ctrl + a на ПК), чтобы выбрать все, затем нажмите клавишу со стрелкой вправо, а затем введите. НЕТ разрыва строки. Это похоже на то, что сценарий теряет след каретки, если вы перемещаете его любым другим способом, кроме символа за символом.
Тест 3: нажмите клавишу ввода 3 раза подряд без какого-либо другого содержимого, и вы получите сообщение об ошибке
Идеи