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：當文本位於文本區域內時，選定的文本不會被替換

回答

相關問題