javascript - 防止选择 rt 标签(furigana)中的文本

Question

我使用 ruby​​ 注释为日文文本添加注音假名:

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

当我尝试选择汉字并在 Safari 或 Chrome 中复制它时，剪贴板如下所示:

漢
かん
字

我也无法从 OS X 的字典中查找单词。

有什么方法可以防止选择注音假名吗？ rt { -webkit-user-select: none; 似乎不起作用。

Answer 1

看来，如果将它们包裹在一个 <ruby> 中元素，像这样:

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

然后可以选择汉字而不选择注音假名。

---

更新:

对于像间ニ合わせる这样的汉字假名混合文本，您可以:

1. 使用空 <rt>元素，像这样:

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

2. 使用 Clipboard events 编写一些 javascript ^{* †}:

   • 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 上测试正常
†​​ 可能需要更新的浏览器版本
‡ 我添加了 css 代码行 rt::selection { display: none; }防止注音假名文本被(视觉上)选中}