![](/img/trans.png)
[英]Move caret to the end in contenteditable element and alight text to the end
[英]javascript: move caret to end of element (div with contenteditable)
我有这个函数用于聚焦一个有意义的div并将插入符号移到文本的末尾,但它不能按预期工作。
单击“将插入符号移动到结尾”按钮,插入符号位置为1而不是div#foo length。 但如果你点击“我是一个字符串”的“g”字符,则插入位置为12
function moveCaretToEnd(nativeElement) { nativeElement.focus(); if (window.getSelection) { if (typeof window.getSelection !== 'undefined' && typeof document.createRange !== 'undefined') { const range = document.createRange(); range.selectNodeContents(nativeElement.firstChild); range.collapse(false); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } updateCaretPos(window.getSelection().anchorOffset); } function updateCaretPos(pos){ document.getElementById('caretpos').innerHTML = pos; }
<div id="foo" contenteditable="true" onclick="updateCaretPos(window.getSelection().anchorOffset)" style="border: 1px solid grey">i'm a string</div> <p>Caret position <div id="caretpos"></div></p> <button onclick="moveCaretToEnd(document.getElementById('foo'))">Move caret to end</button>
您试图将按钮本身作为插入符号的元素传递,我建议您执行以下操作:
function moveCaretToEnd(nativeElement) {
// If nothing passed, choose an element by default
nativeElement = nativeElement || document.getElementById('foo');
nativeElement.focus();
if (window.getSelection) {
if (typeof window.getSelection !== 'undefined' && typeof document.createRange !== 'undefined') {
const range = document.createRange();
range.selectNodeContents(nativeElement);
range.collapse(false);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
updateCaretPos();
}
function updateCaretPos(){
document.getElementById('caretpos').innerHTML = window.getSelection().anchorOffset;
}
moveCaretToEnd(document.getElementById('foo'));
在HTML方面,我在按钮上添加了type="button"
,因此它不会提交:
<div id="foo" contenteditable="true" onclick="updateCaretPos()">click me</div>
<p>Caret position <div id="caretpos"></div></p>
<button type="button" onclick="moveCaretToEnd()">Move caret to end</button>
你将'this'传递给函数,但'this'将是'button',而不是div。
请尝试使用此HTML:
<button onclick="moveCaretToEnd(document.getElementById('foo'))">Move caret to end</button>
编辑 :
要选择textNode,您可以尝试:
range.selectNodeContents(nativeElement.firstChild);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.