contenteditable，在文本的末尾设置插入符号（跨浏览器）
在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，或者至less我在网上找不到任何东西。
无论如何，我现在要做的是，当我按下button时 ，我要把脱字符设置在文本的末尾，所以它应该看起来像这样：
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 } }
以下function将在所有主stream浏览器中执行：
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.getElementById("content") );
在开始处放置插入符号几乎是相同的：只需要将传递给调用的布尔值更改为collapse() 。 下面是一个例子，它创build了在开始和结束时插入插入符号的函数：
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);
不幸的是，蒂姆的优秀答案只适用于最后的放置，因此在开始时我必须稍微修改一下。
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()实际上是需要的。
如果你正在使用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中testing了这个，不知道IE …
