Question

我在使用预定义的替换文本替换 textarea 中的选定文本时遇到问题。

要替换文字，我必须选择它并右键单击。

如果文字位于<div>或<p>标记内，则替换正常进行。但如果文本在<textarea>内，则不会被正确替换。

中提供了一个示例

这是我的代码：

HTML：

<p> Select any text in this sentence and right click to replace it </p>

 <div>
  <textarea name = "intro" rows = "5" cols = "80">This text is not getting replaced as expected
  </textarea>
</div>

JS：

if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
        replaceSelectedText("<<replaced>>");
        e.preventDefault();
    }, false);
} else {
    document.attachEvent('oncontextmenu', function() {
        alert("You've tried to open context menu");
        window.event.returnValue = false;
    });
}

function replaceSelectedText(replacementTxt) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        console.log(sel);
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            console.log(range);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementTxt));
        }
    } else if (document.selection && document.selection.createRange) {
        console.log("!!")
        range = document.selection.createRange();
        range.text = replacementTxt;
    }
}

我实施它的方式有问题吗？

任何建议都将不胜感激。

Answer 1

您应该使用.value来更改textarea的文本。

看看这个question

Answer 2

textarea中所选文本的范围容器是div本身，而不是textarea元素。因此，当您尝试insertNode替换文本时，它将成为textarea的兄弟。

来自here的更多信息。

textarea元素的问题在于它们不在DOM节点中保存它们的内容。文本值是元素的属性。当你调用range.selectNode时，会发生的是设置范围以包含传递给函数的节点和该节点的子节点，但由于textarea不将其文本存储在子节点中，因此您选择只有textarea。

您需要使用文本区域的选择属性进行字符串替换，并操纵字符串本身而不是DOM。

Answer 3

问题是无法使用window.getSelection访问textarea中的文本。

要访问文本，有不同的选择API，即selectionStart（所选文本开头的索引）和selectionEnd（所选文本结尾的索引）。

这是JS 代码：

function ShowSelectionInsideTextarea(replacementText, eleID)
{
    var textComponent = document.getElementById(eleID);

    if (textComponent.selectionStart != undefined)
      {
        var mainStr = document.getElementById(eleID).value;
        var startPos = textComponent.selectionStart;
        var endPos = textComponent.selectionEnd;
        selectedText = textComponent.value.substring(startPos, endPos);
        mainStr= mainStr.replace(selectedText, replacementText);
        document.getElementById(eleID).innerHTML=mainStr;      
      }
}

这是一个实时 DEMO

JavaScript：当文本在textarea中时，所选文本不会被替换

3 个答案: