在 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标签,或者至少我在网上找不到任何东西。
<br />
无论如何,我现在想做的是,当我按下 按钮时 ,我希望将插入符号设置在文本的末尾,因此它应该看起来像这样:
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 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()。这是一个示例,该示例创建用于将插入号放在开头和结尾的函数:
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);