從室溫標籤（假名）防止文本被選中

Question

我使用Ruby註解假名添加日文文本：

<ruby><rb>漢</rb><rt>かん</rt></ruby><ruby><rb>字</rb><rt>じ</rt></ruby> 

當我嘗試選擇漢字，並在Safari或Chrome複製它，剪貼板是這樣的：

漢 
かん 
字 

我無法從OS X的字典中查找單詞。

有沒有辦法阻止furigana被選中？ rt { -webkit-user-select: none; }似乎不起作用。

Answer 1

看來，如果你包起來一個<ruby>元素中，像這樣：

<ruby> 
    <rb>漢</rb><rt>かん</rt> 
    <rb>字</rb><rt>じ</rt> 
</ruby> 

那麼這將是可能的選擇漢字沒有選擇的furiganas。

---

UPDATE：

對於像間に合わせる，您可以漢字，假名混合文本：

1. 使用空<rt>元素，像這樣：

   <ruby> 
       <rb>間</rb><rt>ま</rt> 
       <rb>に</rb><rt></rt> 
       <rb>合</rb><rt>あ</rt> 
       <rb>わせる</rb><r‌​t></rt> 
   </ruby> 
   

2. 寫一點javascript，maki ng使用Clipboard events^*＆dagger;：

   • HTML：

     <ruby> 
         <rb>間</rb><rt>ま</rt> 
     </ruby> 
     に 
     <ruby> 
         <rb>合</rb><rt>あ</rt> 
     </ruby> 
     わせる 
     

   • 的Javascript：

     $(document).on('copy', function (e) { 
         e.preventDefault(); // the clipboard data will be set manually later 
     
         // hide <rt> elements so that they won't be selected 
         $('rt').css('visibility', 'hidden'); 
     
         // copy text from selection 
         e.originalEvent.clipboardData.setData('text', window.getSelection().toString()); 
     
         // restore visibility 
         $('rt').css('visibility', 'visible'); 
     }); 
     

這裏有一個演示頁^＆匕首;：http://jsfiddle.net/vJK3e/1/

_{*在Safari 6.0.3測試OK
＆匕首;可能需要較新的瀏覽器版本
＆Dagger;我想補充的CSS代碼rt::selection { display: none; }行，以防止齋的假名文字（視覺）選擇}

Answer 2

這裏的香草做的JavaScript的方式：

// hide furigana before sending and reenable after 
document.addEventListener('copy', function (e) { 
    e.preventDefault(); 
    var furis = document.getElementsByTagName('rt'); 
    for (var i = 0; i < furis.length; i++) { 
    furis[i].style.display = 'none'; 
    } 
    e.clipboardData.setData('text', window.getSelection().toString()); 
    for (var i = 0; i < furis.length; i++) { 
    furis[i].style.removeProperty('display'); 
    } 
}); 

如上所述，加入.replace(/\n/g, '')後window.getSelection().toString()將刪除任何新的線路仍然懸而未決。如果你不希望用戶最終得到額外的空間，那麼.replace(' ', '')也可能有用。這些可能會或可能不適合您的使用情況。

Answer 3

建立在Rox Dorentus接受的答案上（並參考jpc-ae的有用Javascript轉換），這裏對算法進行了改進，該算法不涉及破解元素的樣式，這對我來說感覺很脆弱。

取而代之的是，我們爲選擇中的所有節點構建一個參考數組，過濾任何帶有標記<rb>的參數，並返回它們的innerText。如果沒有使用<rb>標籤來包裝漢字，我還會提供一個註釋替代方案。

document.addEventListener('copy', function (e) { 
    var nodesInRange = getRangeSelectedNodes(window.getSelection().getRangeAt(0)); 

    /* Takes all <rb> within the selected range, ie. for <ruby><rb>振</rb><rt>ふ</rt></ruby> */ 
    var payload = nodesInRange.filter((node) => node.nodeName === "RB").map((rb) => rb.innerText).join(""); 

    /* Alternative for when <rb> isn't used: take all textNodes within <ruby> elements, ie. for <ruby>振<rt>ふ</rt></ruby> */ 
    // var payload = nodesInRange.filter((node) => node.parentNode.nodeName === "RUBY").map((textNode) => textNode.textContent).join(""); 

    e.clipboardData.setData('text/plain', payload); 
    e.preventDefault(); 


    /* Utility function for getting an array of references to all the nodes in the selection area, 
    * from: http://stackoverflow.com/a/7784176/5951226 */ 
    function getRangeSelectedNodes(range) { 
    var node = range.startContainer; 
    var endNode = range.endContainer; 
    if (node == endNode) return [node]; 
    var rangeNodes = []; 
    while (node && node != endNode) rangeNodes.push(node = nextNode(node)); 
    node = range.startContainer; 
    while (node && node != range.commonAncestorContainer) { 
     rangeNodes.unshift(node); 
     node = node.parentNode; 
    } 
    return rangeNodes; 

    function nextNode(node) { 
     if (node.hasChildNodes()) return node.firstChild; 
     else { 
     while (node && !node.nextSibling) node = node.parentNode; 
     if (!node) return null; 
     return node.nextSibling; 
     } 
    } 
    } 

});