如果我知道元素ID，如何在contenteditable div中選擇（獲取範圍或選擇對象）元素？

我有這個CONTENTEDITABLE元素：如果我知道元素ID，如何在contenteditable div中選擇（獲取範圍或選擇對象）元素？

<div id="editMe" contenteditable="true"> 
    There is some text here. 
    <span id="selectThisText">This is the target text.</span> 
    And some here. 
</div>

我想使用Javascript功能來選擇（獲取範圍對象）#selectThisText的內容。如何獲取該元素中的內容範圍？

在此先感謝！

來源

2013-11-21 tundoopani

創建範圍，並使用其selectNodeContents()方法。

var span = document.getElementById("selectThisText"); 
var range = document.createRange(); 
range.selectNodeContents(span);

這不適用於IE < = 8，它不支持DOM範圍。但是，這是一個在舊IE中很容易的情況：

var span = document.getElementById("selectThisText"); 
var textRange = document.body.createTextRange(); 
textRange.moveToElementText(span);

來源

2013-11-21 16:26:11

非常感謝！我在你提供的代碼上遇到了一些麻煩。我試過了（http://jsfiddle.net/Yyjr4/1/），但我不確定有什麼問題。編輯：它實際上工作。起初我並沒有意識到，因爲我錯誤地查看了代碼。它只是獲取#selectThisText的範圍。它不會在#editMe中做出選擇。我試圖自己弄清楚這一點，但我希望你能給我提供任何幫助。 – tundoopani

我想我明白了：http://jsfiddle.net/Yyjr4/3/。我使用'window.getSelection（）。addRange（range）'在頁面上進行選擇。這會成爲這樣做的首選方式嗎？非常感謝你的幫助。我不能夠感謝你。 – tundoopani

@tundoopani：是的，沒錯。我不確定你是否想要這個範圍，或者你是否也想選擇它。 http://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard/2044793#2044793 –

-1

var text = $('#selectThisText').text();

演示：http://jsfiddle.net/5NBnP/

來源

2013-11-21 06:54:00 ahren

-1

如果使用的是香草的Javascript，你應該能夠做到

var text = document.getElementById('selectThisText').innerHTML;

或使用jQuery

var text = $('#selectThisText').html();

來源

2013-11-21 06:54:04

謝謝！但是，如何獲得該文本的選擇對象？ – tundoopani

你是什麼意思的「選擇對象」？你是不是想把文本從'span'中去掉？你想弄清楚用戶用鼠標突出顯示了什麼？或者是其他東西？ –

我的意思是一個DOM選擇或DOM範圍對象（https://developer.mozilla.org/en-US/docs/Web/API/range）。謝謝！ – tundoopani

如果我知道元素ID，如何在contenteditable div中選擇（獲取範圍或選擇對象）元素？

回答

相關問題