Javascript 从span'中获取“selectionStart”；s innerHTML

我有一个roll your自己的文本编辑器，可以让您更改

textarea

元素的部分内容。我想调整它以与跨度元素一起工作。我对斯潘没有特别的依恋。其目标只是让用户编辑html而不是文本区域。我在IE中工作得很好，但在Mozilla中遇到了一些问题

因为我使用的是span而不是表单输入，所以我使用的是

innerHTML

而不是value。但是，我似乎无法让

selectionStart

和

selectionEnd

函数在

innerHTML

上工作，而不是在

值上工作

下面是工作正常的
textarea
代码

html

但是，以下自适应不会将选择限制为开始和结束

html

innerHTML
上的
selecionStart
是否有问题？解决办法？语法错误？谢谢你的建议
 首先，不要将
innerHTML
用于此类内容<代码>文本内容

是这里的方法

我在这里假设使用标准兼容浏览器或IE9+

首先要做的是获取文档选择。你可以这样做

var sel = getSelection();

现在，选择可以为空，也可以在元素外部，因此请检查：

var rng, startSel, endSel, sel;
if (!sel.rangeCount
        || displaytext.compareDocumentPosition((rng = sel.getRangeAt(0)).startContainer) === Node.DOCUMENT_POSITION_PRECEDING
        || displaytext.compareDocumentPosition(rng.endContainer) === Node.DOCUMENT_POSITION_FOLLOWING)
    sel = "";
else {
    ...

此时，

rng

包含一个

Range

对象，其属性为

startOffset

和

endOffset

。这些值是整数，分别表示

startContainer

和

endContainer

的

textContent

属性的位置

您有一个相当简单的case，它是一个带有单个文本节点的

元素。在这种情况下，

rng.startContainer

和

rng.endContainer

将始终是

displaytext

，或前面或后面的某个元素，但不是

displaytext

的后代

    ...
else {
    startSel = displaytext.compareDocumentPosition(rng.startContainer) === Node.DOCUMENT_POSITION_FOLLOWING ? 0 : rng.startOffset;
    endSel = displaytext.compareDocumentPosition(rng.endContainer) === Node.DOCUMENT_POSITION_PRECEDING ? displaytext.textContent.length : rng.endOffset;
    sel = displaytext.textContent.substring(startSel, endSel);
}

如果有一个更复杂的结构

displaytext

，包含子元素和所有元素，事情就变得有点棘手了。您必须在

displaytext

的后代树中找到起始节点的文本偏移量，最好的方法是使用

TreeWalker

对象遍历文本节点：

var tw = document.createTreeWalker(displaytext, NodeFilter.SHOW_TEXT, null, null);

---

innerHTML

和

value

会产生什么结果？你能把它们放在警报里，然后把结果贴在这里吗？（或链接）它返回未定义的。我想我已经发现selectionStart只适用于textarea和text元素。看起来我需要selectionStart和selectionEnd的替代方案，这两个选项适用于跨度…可能重复的请看这里（第一个答案解释了它）嗨，textContent工作得很好，但是，我无法让整个脚本正常工作。。。我错过什么了吗？非常感谢。@user1904273是的，很抱歉，在第一个

if

语句中有一个额外的括号。为你准备好了，没关系。让它发挥作用。在前面的后面有一个额外的右括号。再次感谢！

var sel = getSelection();

var rng, startSel, endSel, sel;
if (!sel.rangeCount
        || displaytext.compareDocumentPosition((rng = sel.getRangeAt(0)).startContainer) === Node.DOCUMENT_POSITION_PRECEDING
        || displaytext.compareDocumentPosition(rng.endContainer) === Node.DOCUMENT_POSITION_FOLLOWING)
    sel = "";
else {
    ...

    ...
else {
    startSel = displaytext.compareDocumentPosition(rng.startContainer) === Node.DOCUMENT_POSITION_FOLLOWING ? 0 : rng.startOffset;
    endSel = displaytext.compareDocumentPosition(rng.endContainer) === Node.DOCUMENT_POSITION_PRECEDING ? displaytext.textContent.length : rng.endOffset;
    sel = displaytext.textContent.substring(startSel, endSel);
}

var tw = document.createTreeWalker(displaytext, NodeFilter.SHOW_TEXT, null, null);