獲得一個DOM範圍通過點擊元素

鑑於以下HTML內的任何地方...獲得一個DOM範圍通過點擊元素

<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>, 
</p> 
<p>Tomorrow is the next day, etc, etc....</p>

點擊$$ DAYOFWEEK $$返回一個DOM Range對象（通過組件，它是一個WYSIWIG editor bundled with KendoUI）。

那麼我就可以訪問整個元素，像這樣......

var element = range.startContainer.parentElement; 
console.log(element);

，輸出...

<span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>

什麼，我試圖找出是如何構造一個Range對象由整個元素組成，作爲範圍。

所需的「高級別」行爲是單擊一段文本，並讓瀏覽器選擇該元素內的所有文本，返回一個Range對象。

很高興接受jQuery解決方案。

來源

2013-05-21 Baldy

HTML

<p>Today is <span data-token="DateTime.DayOfWeek">$$DayOfWeek$$</span>,</p> 
<p>Tomorrow is the next day, etc, etc....</p>

var span = document.querySelector('[data-token]'); 

span.addEventListener('click', function() { 
    var sel = window.getSelection(); 
    var range = document.createRange(); 
    sel.removeAllRanges(); 
    range.setStart(span.childNodes[0], 0);      
    range.setEnd(span.childNodes[0], span.innerText.length); 
    sel.addRange(range);      
});

這裏有一個爲你撥弄： http://jsfiddle.net/V66zH/2/

它可能不是超級跨瀏覽器，但在鉻中工作。請參閱JavaScript Set Window selection以獲得其他地方的其他優化。

還假定只有一個childNode在你的榜樣HTML

的範圍（https://developer.mozilla.org/en-US/docs/Web/API/range）和選擇（https://developer.mozilla.org/en-US/docs/Web/API/Selection）

來源

2013-05-21 17:52:42

謝謝馬特。確實很容易將你的小提琴調整到編輯器組件中，並簡單地將它傳遞給創建的範圍，以便選擇整個元素。 – Baldy

在FireFox我在span.innerText上得到一個錯誤...所以我改變了jsFiddle了一下.. 'var TX = span.textContent || span.innerText; range.setEnd（span.childNodes [0]，TX.length）;' ..這種方式我認爲它適用於所有瀏覽器。 –

這裏有一種方法，我想出了，似乎工作，如果我正確理解你，你想圍繞一個點擊的元素產生一個範圍包含在該元素的一切。

沒有的onclick代碼，我以爲你可以處理，這裏是您所描述的DOM範圍代碼：

var sel=document.getSelection(); //find the node that was clicked 
var rng=sel.getRangeAt(); //get a range on that node 

//now, extend the start and end range to the whole element: 
rng.setStart(rng.startContainer.parentNode.firstChild); 
rng.setEndAfter(rng.endContainer.parentNode.lastChild); 

//DEMO: verify the correct range using a temp div/alert: 
var t=document.createElement("div"); 
t.appendChild(rng.cloneContents()); 
alert(t.innerHTML);

來源

2013-05-21 17:50:38 dandavis

+1包裹的範圍內進入一個新的div的想法有些額外的基準 - 這是有用的獲取在html – Baldy

獲得一個DOM範圍通過點擊元素

回答

相關問題