![](/img/trans.png)
[英]Set caret position at a specific position in contenteditable div
[英]Set caret position in contenteditable div
在编辑可内容编辑的DOM对象的内容时,不同的浏览器会有不同的行为。 例如,Firefox 18.0会创建一个新段落( <p>
)或一个换行符<br/>
,而Chrome 24会创建一个<div>
。
为了解决这个问题,我正在监听DOMNodeInserted
事件,并用p标签替换新插入的节点。
问题是将插入号放置到位。 我在SO中读过关于同一主题的大量帖子,但至少在Chrome 24中,所提供的答案均无效 。
obj.addEventListener("DOMNodeInserted", onNodeInsert, false);
function onNodeInsert(e) {
var range = document.createRange(),
sel = window.getSelection(),
newNode = e.target,
tagName = newNode.tagName.toLowerCase(),
lnbrNode = document.createElement('br'),
pNode = document.createElement('p');
if (tagName === 'div' && newNode.getAttribute("id") === null) {
// First we remove the event listener so that it doesn't get triggered again
this.removeEventListener('DOMNodeInserted', onNodeInsert, false);
// Creates a p node and removes the div
newNode.parentNode.replaceChild(pNode, newNode);
pNode.appendChild(lnbrNode);
// Places the caret where it belongs
range.setStart(pNode, 0);
sel.removeAllRanges();
sel.addRange(range);
//We can restore the event listener now
this.addEventListener("DOMNodeInserted", onNodeInsert, false);
}
}
对于那些可能会遇到与我相同的问题的人,这是我的肮脏解决方案...
obj.addEventListener("DOMNodeInserted", onNodeInsert, false);
function onNodeInsert(e) {
var range = document.createRange(),
sel = window.getSelection(),
newNode = e.target,
tagName = newNode.tagName.toLowerCase(),
lnbrNode = document.createElement('br'),
pNode = document.createElement('p');
if (tagName === 'div' && newNode.getAttribute("id") === null) {
// First we remove the event listener so that it doesn't get triggered again
this.removeEventListener('DOMNodeInserted', onNodeInsert, false);
// Creates a p node and removes the div
newNode.parentNode.replaceChild(pNode, newNode);
pNode.appendChild(lnbrNode);
// Places the caret where it belongs
var placeCursor = function () {
range.setStart(pNode, 0);
sel.removeAllRanges();
sel.addRange(range);
}
//placeCursor(); // DOES NOT WORK (cursor disappears)
setTimeout(placeCursor,1); // WORKS
//We can restore the event listener now
this.addEventListener("DOMNodeInserted", onNodeInsert, false);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.