Webページのコピーを禁止するには

とあるサイトで、テキストがコピーできない箇所がありました。
どのような仕組みでコピーを禁止しているのかを調べてみました。

コピーできない要素は次のようなタグになっていました。

<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を返すことで、右クリック時に何もしません。

参考

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;」は、コールアウト表示を無効にします。

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください