jQueryでテキストの選択を禁止して文章をコピーガードする
最終更新日: Update!!
過去にウェブサイトにおける画像のコピーガードの手法として「jQueryでサイト内画像のコピーガードをする」を紹介しましたが、今回はテキスト本文に対してのコピーガードの手法をまとめていきたいと思います。
具体的には、テキスト部分を選択できないようにする形になります。画像のコピーガードと同じ要領で、下記のコードを記述することでテキスト部分の選択を防ぐことができます。
【javascript】
$(function(){ $("p").on('selectstart',function(e){ return false; }); });ちなみに一部のブラウザを除けばこのようにCSSでも対応することが可能です。 【CSS】
p { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }実際に動作を確認できるサンプルを下記に用意していますので、ご参考に。
See the Pen Copy_guard_sentences by designsupply (@designsupply) on CodePen.
ちょっとしたことですが、ブログやメディアサイトを運営されている場合などに、記事原稿などの盗用を防ぐことができるのでは無いでしょうか。画像のコピーガードでまとめている「jQueryでサイト内画像のコピーガードをする」と併用することで効果を発揮しそうですね。 (参考にさせて頂いたサイト) 右クリックと文字列選択を禁止する方法とそれを無効にするブックマークレット user-select | MDNsponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories