Я нашел этот скрипт, который восстанавливает расположение каретки в элементе contenteditable, когда он не сфокусирован и нажатием кнопки, чтобы сделать это.Таким образом, все работает отлично, но если я нажму кнопку ввода или сделаю разрыв строки
или что-то, что заканчивается кареткой на другой строке, тогда скрипт не сможет найти местоположение каретки на новой строке.Это то, что я имею в виду.Например, я восстанавливаю расположение каретки после go .
Today was a good day.
Но оно не работает, если оно находится на другой линии.
Today was
a good day.
Так как я могу получитьэтот скрипт работает на любой строке независимо от расположения в этом contenteditable элементе?
код
document.addEventListener('DOMContentLoaded',function(){
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != 'undefined') {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
} else if ((sel = doc.selection) && sel.type != 'Control') {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint('EndToEnd', textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
var lastCaretPos = 14;
function showCaretPos() {
/* You could store the position when you call this function */
var el = document.querySelector('#test');
lastCaretPos = getCaretCharacterOffsetWithin(el);
var caretPosEl = document.querySelector('#caretPos');
caretPosEl.innerHTML = 'Caret position: ' + lastCaretPos;
}
function restoreCaretPos() {
var node = document.querySelector('#test');
node.focus();
var textNode = node.firstChild;
var range = document.createRange();
range.setStart(textNode, lastCaretPos);
range.setEnd(textNode, lastCaretPos);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
document.querySelector('#test').onkeyup = showCaretPos;
document.querySelector('#test').onmouseup = showCaretPos;
document.querySelector('#button').onclick = restoreCaretPos;
});
<div id='test' contenteditable='true'>Today was a good day.</div>
<div id='caretPos'>Caret position: 14</div>
<input type='button' id='button' value='restore caret'>