Javascript 在contenteditable div中设置插入符号位置 简介
编辑contenteditable DOM对象的内容时,不同的浏览器具有不同的行为。例如,Firefox 18.0在某些情况下创建一个新段落或换行符,而Chrome 24则创建一个新段落 为了解决这个问题,我正在监听DOMNodeInserted事件,并用p标记替换新插入的节点 问题 问题是如何放置插入符号。我在SO上读过很多关于同一主题的帖子,但所提供的答案都不起作用,至少在Chrome24上是这样 密码Javascript 在contenteditable div中设置插入符号位置 简介,javascript,contenteditable,caret,cursor-position,Javascript,Contenteditable,Caret,Cursor Position,编辑contenteditable DOM对象的内容时,不同的浏览器具有不同的行为。例如,Firefox 18.0在某些情况下创建一个新段落或换行符,而Chrome 24则创建一个新段落 为了解决这个问题,我正在监听DOMNodeInserted事件,并用p标记替换新插入的节点 问题 问题是如何放置插入符号。我在SO上读过很多关于同一主题的帖子,但所提供的答案都不起作用,至少在Chrome24上是这样 密码 对于那些可能会遇到与我相同问题的人,这里是我的肮脏修正 相关代码 WebKit不允许您将
对于那些可能会遇到与我相同问题的人,这里是我的肮脏修正 相关代码
WebKit不允许您将插入符号放在任何地方:它总是将插入符号位置规范化为它认为有效的位置。唯一的解决办法是用零宽度的空格或者更可怕的东西来破解它。谢谢你的评论。在webkit中,它的设计似乎有缺陷。对于您提到的特定问题,我的解决方法是始终在文本开头创建段落标记,因为这实际上是这个特定项目所需要的行为。@TimDown您能解释一下webkit的破解方法吗?或者至少提供一个链接来解释这一点。@U_Green先生:破解方法是在您希望放置插入符号的位置添加一个零宽度空格字符Unicode U+200B,方法是添加一个新的文本节点或插入到现有的文本节点中,然后将插入符号紧跟在零宽度空格之后。除非用户使用左箭头键,否则不会看到差异。然后,当这个空间不再需要时,您就有了删除它的问题。@TimDown我对所有这些东西都是新手。慢慢地学习。。你能告诉我你的一个链接解释同样的情况吗?@格林先生小提琴就是这个代码。诀窍是这一行:setTimeOverplaceCursor,1;如果您设置了一个超时,它应该会工作感谢您的响应。我的javascript很差。你能更新一下你的小提琴吗。以便我可以在我的项目中使用它:。我尝试将setTimeout更改为以下setTimeoutplaceCursor,500;没用。没有错误。
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);
}
}