JavaScript：当文本位于文本区域内时，选定的文本不会被替换

我在使用预定义替换文本替换textarea中的选定文本时出现问题。JavaScript：当文本位于文本区域内时，选定的文本不会被替换

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

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

的样本可在此Fiddle

这里是我的代码：

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; 
    } 
}

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

任何建议，将不胜感激。

来源

2014-12-08 VSri58

仍在调查，但我相信，我知道这个问题的一部分。看起来当你右键点击时，它不是选择'textarea'，而是最终选择父div。不知道这是否有助于你更多地移动。 – aug 2014-12-08 07:32:29

我正在努力..谢谢你的信息.. – VSri58 2014-12-08 07:34:33

啊我发现了这个问题。 [这是一个相关的问题。]（http://stackoverflow.com/questions/19953220/use-window-getselection-get-selected-or-cursor-located-text-line-from-textarea）显然textarea使用不同的选择API，所以你必须使用selectionStart和selectionEnd属性。希望帮助更多。 – aug 2014-12-08 07:41:22

问题是无法使用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

来源

2014-12-08 09:27:26 VSri58

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

看这个question

来源

2014-12-08 07:24:13

仍然无法正常工作..如果您看到我的小提琴，将显示替换文字，但不在textarea内的正确位置。 – VSri58 2014-12-08 07:29:29

你不能用'.insertNode'将它添加到textarea textarea文本不是一个DOM元素。您必须使用value来获取字符串，更改文本并使用'.value（）'将其写回textarea – 2014-12-08 07:42:32

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

来自here的更多信息。

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

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

来源

2014-12-08 07:33:28 Jefraim

JavaScript：当文本位于文本区域内时，选定的文本不会被替换

回答

相关问题