在 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 标签,或者至少我在网上找不到任何东西。
无论如何,我现在要做的是,当我点击按钮时,我希望将插入符设置在文本的末尾,所以它应该看起来像这样:
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()
的 bool 值。下面是一个示例,它创建了将插入符放在开头和结尾的函数:
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);
关于javascript - contenteditable,在文本末尾设置插入符(跨浏览器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4233265/