【jQuery】記事テキストの選択ができないようにする方法

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

サンプルをCodePenで確認

この記事で紹介するコードを使用すると、以下のように指定したタグのテキストを選択不可能にすることができます。

サンプルでは文章は選択できないようにしています。

違いが分かりやすいように、見出し文字には実装していませんので実際に普段文章をコピーしている要領で試してみてくださいまし。

▼▼▼

See the Pen
テキスト選択禁止 by 石森裕也 (@yuyaphotograph)
on CodePen.

テキストの選択ができないようにする方法

HTMLとjQueryのサンプルコードを紹介します。

HTML

<div class="Item">
  <h2 class="Item-Headline">ご挨拶</h2>
  <p>ごきげんよう。</p>
  <p>当ブログ運営のゆうやです。</p>
  <p>モットーは"好きなことを淡々と"です。</p>
  <p>以後お見知り置きを。</p>
</div>

jQuery

$(function(){
  $(".Item p").on('selectstart',function(e){
    return false;
  });
});

ユーザーがテキストを選択しようとした時に発火されるのがselectstartイベントです。

上記コードのように記述することで指定したHTMLエレメントが選択できないようになります。

例えばh2要素に適用させたい場合は以下のように指定すればOKです。

$(function(){
  $("h2").on('selectstart',function(e){
    return false;
  });
});

まとめ

以上、jQueryでユーザーのテキスト選択をブロックする方法を紹介しました。

「jQuery、Javascriptで実装できるTipsをもっと知りたい！」

という方は以下の記事も目を通してみてください〜

【jQuery】ページ内リンクのスムーススクロールをコピペで実装！

【jQuery】チェックしたら有効になる！お問い合わせフォームでよく使う「同意する」ボタンの作り方

【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方