質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6321閲覧

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

suiheisan

総合スコア35

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

2クリップ

投稿2016/07/08 16:13

編集2016/07/08 17:54

ルビつきの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はルビをとばしてコピペできますが、それ以外はダメでした。
ルビだけコピーせずにすむいい方法がありましたらよろしくお願いします。

guest1213👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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さんのみがコピペする話かと勘違いしていました。
guest

回答2

0

ベストアンサー

「自サイトの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を使うなんて思いもよりませんでした。参考になります。
guest

0

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});

rubyタグをコピーする時にrtタグのcssをdisplay:none;にします。
コピーが終わったら、ルビが現れるようにrtタグのcssをdisplay:;(削除)にします。

.on('copy')だとMicrosoft Edgeで動かなかったので、guest1213さんのを真似をしました。

次のブラウザでは動きました。
FireFox 47.0
Google Chrome 51.0
Opera 38.0
Android 5.0.2標準ブラウザ
iOS9.3.2 Safari
Microsoft Edge

投稿2016/07/08 20:04

編集2016/07/08 20:38
coba-coba

総合スコア1409

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問