Contenteditable，在文本末尾设置插入符号(跨浏览器)

铬合金的输出:

<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
hey
<div>what's up?</div>
<div>
<button id="insert_caret"></button>

我相信 FF会是这样的:

hey
<br />
what's up?

在 IE:

hey
<p>what's up?</p>

不幸的是，没有好的方法让每个浏览器插入一个 <br />而不是 div 或 p 标签，或者至少我在网上找不到任何东西。

无论如何，我现在正在做的是，当我点击 纽扣，我想插入符号设置在文本的结尾，所以它应该看起来像这样:

hey
what's up?|

有什么方法可以让它在 所有浏览器中工作吗？

例如:

$(document).ready(function()
{
$('#insert_caret').click(function()
{
var ele = $('#content');
var length = ele.html().length;


ele.focus();


//set caret -> end pos
}
}
68675 次浏览
小开
最佳答案

下面的函数可以在所有主要的浏览器中实现:

function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}


placeCaretAtEnd( document.querySelector('p') );
p{ padding:.5em; border:1px solid black; }
<p contentEditable>foo bar </p>

把插入符号放在开始几乎是相同的: 它只需要改变传递到 collapse()调用的布尔值。下面是一个创建函数的示例，用于在开头和结尾放置插入符号:

function createCaretPlacer(atStart) {
return function(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(atStart);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(atStart);
textRange.select();
}
};
}


var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);
小开

如果你正在使用 google 闭包编译器，你可以做以下事情(从 Tim 的回答中简化了一些) :

function placeCaretAtEnd(el) {
el.focus();
range = goog.dom.Range.createFromNodeContents(el);
range.collapse(false);
range.select();
}

下面是 ClojureScript 中的相同内容:

(defn place-caret-at-end [el]
(.focus el)
(doto (.createFromNodeContents goog.dom.Range el)
(.collapse false)
.select))

我已经在 Chrome，Safari 和 FireFox 中测试过了，不确定是否适合 IE..。

小开

不幸的是，蒂姆出色的回答对我来说只适用于排在末尾，而对于排在开头，我不得不稍微修改一下。

function setCaret(target, isStart) {
const range = document.createRange();
const sel = window.getSelection();
if (isStart){
const newText = document.createTextNode('');
target.appendChild(newText);
range.setStart(target.childNodes[0], 0);
}
else {
range.selectNodeContents(target);
}
range.collapse(isStart);
sel.removeAllRanges();
sel.addRange(range);
target.focus();
target.select();
}

但不确定是否真的需要 focus()和 select()。

小开

这个(实时)示例展示了一个简短的简单函数 setCaretAtStartEnd，它接受两个参数; 一个(可编辑)节点将插入符号放在 & a 布尔值上，指示放置它的位置(节点的开始或结束)

const editableElm = document.querySelector('[contenteditable]');


document.querySelectorAll('button').forEach((elm, idx) =>
elm.addEventListener('click', () => {
editableElm.focus()
setCaretAtStartEnd(editableElm, idx)
})
)


function setCaretAtStartEnd( node, atEnd ){
const sel = document.getSelection();
node = node.firstChild;


if( sel.rangeCount ){
['Start', 'End'].forEach(pos =>
sel.getRangeAt(0)["set" + pos](node, atEnd ? node.length : 0)
)
}
}
[contenteditable]{ padding:5px; border:1px solid; }
<h1 contenteditable>Place the caret anywhere</h1>
<br>
<button>Move caret to start</button>
<button>Move caret to end</button>


提交答案