相关疑难解决方法(0)

我有一个令人满意的div,我需要在插入位置插入文本,

这可以在IE中轻松完成 document.selection.createRange().text = "banana"

有没有类似的方法在Firefox/Chrome中实现这一点？

(我知道这里存在一个解决方案,但它不能在contenteditable div中使用,看起来很笨拙)

谢谢!

我有一个拼写检查解决方案，该解决方案使用可编辑的内容，div并span在拼写错误的单词周围插入标签。每次div更新的内部html时，光标就会移动到的开头div。

我知道，div如果用户将新单词添加到句子的末尾（下面的代码），我可以将光标移到末尾。

旧文本：这是拼写检查器|

新文本：这是拼写检查器解决方案|

var range = document.createRange();
range.selectNodeContents(element[0]);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

但是，如果用户在句子中间添加单词，则无法保留光标位置。

旧文本：这是一个拼写检查器

新文本：这是一个新的拼写检查器|

在上述情况下，光标应移至div“ new”之后的末尾。

如何保持光标位置？由于我正在更新html并添加节点，因此无法在更新之前保存范围并将其添加到选择对象中。

提前致谢。

所以我有一个方法,它接受一个标签并包装该标签中的选定文本.

function wrap(tag) 
{               
    var sel, range;
    if (window.getSelection)
    {
        sel = window.getSelection();
        if (sel.rangeCount)
        {
            range = sel.getRangeAt(0);
            var selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('['+tag+']'+selectedText+'[/'+tag+']'));                            
        }
    } 
}

然而,这个问题是在完成包装文本并插入节点之后,在插入的文本之前放置了插入符号(它们正在键入的位置).

是否有这样的方式来插入文本并将插入符号保留在其末尾？

请注意,如果不使用jQuery或任何其他库,可以这样做.我只需要它在webkit(Safari)中工作.

我正在尝试实现以下功能:

<div id="editor" contenteditable="true">
I am some text.
</div>

$('#editor').replaceHtmlAt(start, end, string);

使用案例:

1. 用户输入@内部#editor

2. keyup事件挑选了这个@位置

3. ​

   $('#editor').replaceHtmlAt(position of @, position of @ + 1, "<div>Hello</div>");

   Run Code Online (Sandbox Code Playgroud)

这可能吗？

编辑

通过这样做,我得到了它的工作

$(this).slice(pos-1).html('<span id="mention'+pos+'">@</span>');

但是我遇到了另一个问题.在Chrome中,#editor内的插入符号位置一直向后移动...如何在span标记内的'@'后恢复插入符号的位置？

当我在一个contenteditable div中插入一个html标签时,我需要光标向外移动(向右)新插入的元素,所以如果我继续输入,新文本将被取消格式化.

使用Firefox我发现这个解决方案工作得很好:

node = document.createElement("strong");
node.innerHTML = "test";

range.deleteContents();
range.insertNode(node);
range.collapse(false);

变量范围以这种方式设置:

if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
    }
}

在webkit浏览器(Chrome/Safari)中使用上述代码,将光标放在新标签之外,但在左侧.

是否有解决方案(Chrome/Safari)和IE支持(主要是9,可选8)？

谢谢

=============================================

感谢Tim的建议,这是工作代码:

var node = document.createElement("strong");
node.innerHTML = "test";

var space = document.createElement("span");
space.innerHTML = "\u200B";

range.insertNode(space);
range.insertNode(node);
range.collapse(false);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

我正在开发一个webapp,我遇到了JavaScript问题.

以下是导致问题的HTML的简化版本.我有一些嵌套contenteditable divs(我用占位符文本替换了真实内容):

<div contenteditable="true" id="div1">
    text
    <div contenteditable="inherit" id="div2">
        text
        <div contenteditable="inherit" id="div3">
            text
        </div>
        text
    </div>
    text
</div>

我想通过JavaScript获取所选元素(由用户编辑),但到目前为止我还没有找到一种方法(成功).

我尝试了什么,为什么它不起作用:

我尝试过使用document.activeElement,它应该返回焦点中的任何一个元素.通常这是有效的,但在使用嵌套contenteditable元素时它不会产生所需的结果.它返回最上面的contenteditable祖先,而不是返回用户正在编辑的元素.

例如,如果div2选择/正在编辑,则document.activeElement返回div1.如果div3选择/正在编辑,document.activeElement也会返回div1.

所以我想document.activeElement这不是正确的方法.

如何获得正在编辑的最具体元素,而不是其最重要的contenteditable祖先？