ルビだけコピーしたくない

ルビつきのhtml文章をコピペしたときにルビの部分は飛ばしたいです。

html
1<ruby><rb>親譲</rb><rp>（</rp><rt>おやゆず</rt><rp>）</rp></ruby>りの<ruby><rb>無鉄砲</rb><rp>（</rp><rt>むてっぽう</rt><rp>）</rp></ruby>で小供の時から損ばかりしている。

上のようなhtmlをコピペすると

親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。

となります。コピペ後の文章は大変読みづらいです。
ルビだけ飛ばしてコピペすることはできませんか？

//こうしたい
親譲の無鉄砲で小供の時から損ばかりしている。

コピペしない方法をネットで調べるとCSS3のuser-selectをやjavascriptのoncopyで禁止する方法が見つかりますが、どちらも指定した要素の外側から選択するとコピーできてしまい、ルビのコピー禁止には向いていません。

試した環境は
window7 + Firefox47.0.1
window7 + IE11
window7 + Opera38.0
window7 + Google Chrome51.0
iOS9.3
android4.2標準ブラウザ

Firefoxはルビをとばしてコピペできますが、それ以外はダメでした。
ルビだけコピーせずにすむいい方法がありましたらよろしくお願いします。

coba-coba

2016/07/08 17:06

どのブラウザを試しましたか？Windows10 + Firefox47.0.1だとルビを飛ばしてコピペできましたよ。

suiheisan

2016/07/08 17:56

ありがとうございます。 Firefoxは未確認だったのでたった今確認しました。 window7 + Firefox47.0.1 は希望通りのコピペができました。その他の環境を質問に情報を追加しました。ご確認お願いします。

coba-coba

2016/07/08 19:17

普通に考えたら不特定多数のユーザが対象ですよね。すみません、suiheisanさんのみがコピペする話かと勘違いしていました。

回答2件

ベストアンサー

「自サイトのHTMLページ内にてユーザーがコピー＆ペーストする際にルビを無くしてコピー＆ペーストさせたい」という問題だと受け取りました。
以下のコードでそのような動きになりました。Windows10にてIE11,Edge,Chromeでは動作確認しています。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>a</title>
6</head>
7<body>
8  <section>
9    <h2>おはなし</h2>
10    <p>
11      <ruby><rb>親譲</rb><rp>（</rp><rt>おやゆず</rt><rp>）</rp></ruby>りの<ruby><rb>無鉄砲</rb><rp>（</rp><rt>むてっぽう</rt><rp>）</rp></ruby>で小供の時から損ばかりしている。
12    </p>
13  </section>
14  <script>
15  document.addEventListener("copy", function() {
16    var rtList = document.getElementsByTagName("rt");
17    var contentList = [];
18    Array.prototype.forEach.call(rtList, function(rt) {
19      contentList.push(rt.textContent);
20      rt.textContent = "";
21    });
22    setTimeout(function() {
23      Array.prototype.forEach.call(rtList, function(rt) {
24        rt.textContent = contentList.shift();
25      });
26    }, 0);
27  }, true);
28  </script>
29</body>
30</html>

Clipboard APIと言われるものに分類されるcopyイベント内でドキュメント内全てのrt要素のテキストをいったん空にして、setTimeoutでこのハンドラを抜けた後に内容をもとに戻してます。これで確実なのかは私もわかりません。copyイベント自体はモバイルブラウザでも対応しているようですが、どうでしょうか。

いままでこんなこと全然気にしたことがなかったのですが、ご質問をみたときに「こんな問題があったのか！」と、とても勉強になりました。興味深かったです。

投稿2016/07/08 20:03

guest1213

総合スコア306

回答へのコメント

coba-coba

2016/07/08 20:16

setTimeoutを使うなんて思いもよりませんでした。参考になります。

guest1213さんの回答を拝見して、私もコードを書き換えました。
とても勉強になります。ありがとうございます。

jQueryでrtタグの表示・非表示をcssで切り替えて、コピペ時にルビをコピーしないようにする方法です。

JavaScript
1/* jQuery */
2
3$(function() {
4  document.addEventListener("copy", function() {
5    $('rt').css('display', 'none');
6    setTimeout(function() {
7      $('rt').css('display', '');
8    }, 0);
9  }, true);
10});