输出 Chrome ：
<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-tag，或者至少我找不到任何在线内容。
无论如何，我现在要做的是，当我点击按钮时，我希望将插入符号设置在文本的末尾，所以它看起来应该是这样的：< / 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
}
}
答案 0 :(得分：254)
以下功能将在所有主流浏览器中执行：
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);
答案 1 :(得分：4)
不幸的是，Tim的优秀答案对我来说只是为了放在最后，因为在开始时我必须稍微修改它。
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()。
答案 2 :(得分：0)
这个（实时的）示例显示了一个简短的简单函数setCaretAtStartEnd，它带有两个参数。一个（可编辑的）节点，用于将插入号放置在＆布尔值，指示放置位置（节点的开始或结束）
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>
答案 3 :(得分：-1)
如果您使用谷歌闭包编译器，您可以执行以下操作（稍微简化了蒂姆的答案）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Video in View</title>
<style>
#vid1 { margin: 20px auto; display: block; }
</style>
</head>
<body>
<main class="container">
<h2>Scroll into video viewport</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<video id="vid1" src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" controls width="640" height="auto"></video>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis enim non lorem eleifend condimentum. Praesent quis fermentum orci, eu vestibulum dolor. Vestibulum nec tempor purus, at hendrerit quam. Donec ex quam, fermentum eu dui at, varius convallis justo. Sed dictum laoreet dui, id congue nisl fermentum quis. Sed egestas tincidunt egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec venenatis ligula, ac suscipit diam. Ut nec odio diam. Integer vitae arcu hendrerit, venenatis ex nec, fermentum massa. Duis iaculis nulla ut lorem porta vehicula. Cras venenatis arcu a neque vestibulum mollis in eget neque. Mauris egestas felis sed augue lacinia placerat. Morbi vel enim at justo ultrices cursus ut vitae tortor. Sed scelerisque massa a elit accumsan, eget aliquam ante imperdiet. Proin ac magna tempor, fringilla ante mattis, bibendum justo.</p>
<p>
Sed laoreet ex hendrerit, pellentesque massa non, porta velit. Pellentesque eleifend nunc eget aliquam vehicula. Donec libero neque, rhoncus non imperdiet ac, ornare eu velit. Nullam fringilla venenatis nulla, non faucibus nisl vulputate id. Integer sit amet lacinia eros. Donec eros tortor, blandit non tempor at, commodo non turpis. Sed accumsan sed lacus ac sagittis. Donec eget feugiat tortor. Vestibulum vulputate turpis vel augue tincidunt facilisis. Nullam lectus leo, laoreet ut consectetur sit amet, vestibulum bibendum lectus. Sed sed ipsum sed urna malesuada finibus. Ut egestas ullamcorper molestie. Aenean ultricies mi felis, non fringilla augue luctus quis. Suspendisse odio metus, semper sit amet ullamcorper vitae, pellentesque eu diam.</p>
<p>
In luctus augue at aliquam suscipit. Aliquam a gravida massa. Sed rhoncus lacus ac mattis efficitur. Pellentesque sit amet ipsum sit amet eros venenatis consectetur non vel ex. Sed vitae rhoncus augue. Proin molestie mattis nibh, sed tincidunt orci viverra ut. Curabitur finibus tempus blandit. Donec vitae sagittis urna, in condimentum turpis. Cras elit odio, tempor sed pretium sit amet, posuere at arcu. Integer urna mi, pulvinar ut risus id, iaculis rhoncus turpis. Nam faucibus, enim nec faucibus pellentesque, sem lectus luctus purus, vitae ultricies dolor magna eu ex. In hac habitasse platea dictumst.</p>
<p>
Duis sollicitudin accumsan quam, eget ultricies metus consectetur vel. Sed sollicitudin elementum felis. Sed laoreet vehicula massa sed ultrices. Nullam hendrerit elit ac egestas bibendum. Mauris eleifend posuere vulputate. Nullam in arcu eu dui rutrum scelerisque id mattis urna. Aliquam ut tellus urna. Ut sit amet tellus ut justo hendrerit scelerisque eget at leo. Nullam facilisis scelerisque ultrices.</p>
<p>
Etiam egestas tincidunt eros, eu dictum odio molestie quis. Curabitur rhoncus lacinia felis, eu imperdiet risus consequat ut. Nulla egestas massa vulputate justo molestie, a ultricies ex euismod. Curabitur eleifend congue turpis non ornare. Fusce lacinia blandit ligula, tristique dapibus tellus sodales consectetur. Cras dolor nisl, condimentum ac nisl non, hendrerit venenatis dui. Donec sed libero in ante auctor aliquam eu posuere tellus. Vestibulum eget laoreet ipsum. Suspendisse dictum, sapien sed semper scelerisque, tellus massa lobortis ante, in luctus enim sapien ac diam.</p>
</section>
</main>
<script>
var bindScroll = function(ele, evt, fcn) {
ele[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? evt : 'on' + evt, fcn, false);
}
var scrollPos = function() {
var doc = document.documentElement;
return {
'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
'top': (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
};
}
var playerOffset = document.getElementById('vid1').offsetTop;
var scrollPlayed = false;
var playerInView = function() {
var diff = playerOffset - scrollPos().top;
var adjust = window.innerHeight > (480/2) ? window.innerHeight : 100;
return diff > -100 && diff < adjust;
}
var checker = null;
bindScroll(window, 'scroll', function(e) {
clearTimeout(checker);
if(!scrollPlayed && playerInView()) {
checker = setTimeout(function() {
vid1.play(true);
scrollPlayed = true;
}, 100);
}
});
</script>
</body>
</html>这与ClojureScript中的相同：
function placeCaretAtEnd(el) {
el.focus();
range = goog.dom.Range.createFromNodeContents(el);
range.collapse(false);
range.select();
}
我在Chrome，Safari和FireFox中对此进行了测试，对IE不确定...