とあるサイトで、テキストがコピーできない箇所がありました。
どのような仕組みでコピーを禁止しているのかを調べてみました。
コピーできない要素は次のようなタグになっていました。
<div
oncontextmenu="return false"
onmousedown="return false;"
style="user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
">
この範囲はコピーできない。
</div>
各属性の意味を調べました。
oncontextmenu
oncontextmenu="return false"
oncontextmenuイベントは、右クリックされたときに発火します。
falseを返すことで、右クリック時に何もしません。
参考
- GlobalEventHandlers.oncontextmenu
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/oncontextmenu
onmousedown
onmousedown="return false;"
onmousedownイベントは、マウスボタンが押下されたときに発火します。
falseを返すことで、マウスボタンが押下時に何もしません。
参考
style
style属性の意味は次のようになっていました。
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-selectプロパティ
user-selectプロパティは、ユーザーが文章を範囲選択できるかどうかを制御します。
「user-select: none;」は、文章の範囲選択を無効にします。
参考
-webkit-touch-calloutプロパティ
-webkit-touch-callout: none;
-webkit-touch-calloutプロパティは、対象を長押しすることで現れるコールアウト表示を制御します。
「-webkit-touch-callout: none;」は、コールアウト表示を無効にします。
参考
- -webkit-touch-callout
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-touch-callout