選擇跨度進行的跨多個div問題

我遇到了以下問題 - 我想選擇的文本跨度內遍佈多個div。舉個例子選擇跨度進行的跨多個div問題

<div>asd<span>fgh</span></div> 
<div><span>qwerty</span></div> 
<div><span>uio</span>asd</div>

現在，在這種情況下，如果用戶點擊某個單詞qwerty裏面我想選擇文本「fghqwertuio」 - >所有鄰近跨距。我使用下面的代碼來做到這一點：

var range = document.caretRangeFromPoint(lastTappedX, lastTappedY); 
    range.selectNodeContents(range.startContainer); 
    window.getSelection().addRange(range); 

    var containerNodes = document.body.children[0].children; 
    var whichChild = -1; 

    for (var i = 0; i < containerNodes.length; ++i) { 
     if (containerNodes[i] === range.startContainer.parentNode.parentNode) { 
      whichChild = i; 
      break; 
     } 
    } 

    if (whichChild === -1) { 
     console.log("couldn't find the highlighted div"); 
    } 

    // go right the dom tree 
    for (var i = whichChild + 1; i < containerNodes.length; ++i) { 
     var containerChildren = containerNodes[i].children; 
     if (containerChildren[0] 
       && containerChildren[0].style['background-color']) { 
      var newRange = document.createRange(); 
      newRange.selectNodeContents(containerChildren[0]); 
      window.getSelection().addRange(newRange); 
     } 

     if (containerChildren.length > 1) { 
      break; 
     } 
    } 

    // go left the down tree 
    for (var i = whichChild - 1; i >= 0; --i) { 
     var containerChildren = containerNodes[i].children; 
     if (containerChildren[containerChildren.length - 1].style['background-color']) { 
      var newRange = document.createRange(); 
      newRange 
        .selectNodeContents(containerChildren[containerChildren.length - 1]); 
      window.getSelection().addRange(newRange); 
     } 

     if (containerChildren.length > 1) { 
      break; 
     } 
    }

當我登錄時會發生什麼 - 我正確創建包含文本的範圍，我想，但選擇將其添加到選擇對象似乎並不上班。目前的選擇只是第一個添加的範圍。任何幫助如何解決這個將不勝感激。

來源

2012-06-15 asenovm

你可以使用jQuery嗎？ – iappwebdev

@Simon：jQuery對範圍和選擇沒有任何處理，並且不會幫助解決這裏的根本問題。 –

對不起，我真的不明白你的問題。我創建了一個小提琴，也許你可以基於小提琴來解釋你的問題：http://jsfiddle.net/6rvE7/1/ – iappwebdev

主流瀏覽器，火狐只允許每個選擇多個範圍。在所有其他瀏覽器中，您僅限於一個範圍。

你需要調整你的代碼來創建一個範圍，並使用範圍的setStart()和setEnd()方法。另外，元件的style屬性的屬性使用駱駝情況下，而不是連字符（即.backgroundColor而非['background-color']）。

來源

2012-06-15 09:18:43

有沒有辦法在Chrome或IE中做到這一點？我想知道爲什麼該方法被稱爲addRange，而只能選擇一個範圍？ –

@AshrafSabry：不，除Mozilla瀏覽器之外，沒有辦法做到這一點。 Mozilla編寫了選擇API，其他人都複製了它，除了多範圍支持，因此'addRange（）'和'removeAllRanges（）'。 –

嘿！你是Rangy的作者！這是一個很好的巧合。在確定這些瀏覽器中不支持多個範圍之前，我試圖使用您的庫。當我看到chrome中的「查找和替換」功能以及突出顯示搜索匹配的方式時，我想知道他們爲什麼在他們已經實現時沒有公開這種突出顯示功能。感謝您的良好工作。 –

選擇跨度進行的跨多個div問題

回答

相關問題