ホームページ  >  記事  >  ウェブフロントエンド  >  Web ページ内のテキストがコピーされないようにする方法_html/css_WEB-ITnose

Web ページ内のテキストがコピーされないようにする方法_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:54:451552ブラウズ

こんにちは、おじさんがまた来ました。今日はまたちょっとしたトリックを紹介します。私たちが Web を閲覧していると、Web ページのテキストをコピーできないという事態に遭遇することは難しくありません。ブラウザがクラッシュしたりクラッシュしたりしたように感じることがありますが、実際はそうではありません。これは実際には、Web サイトの開発者がコピーを許可していないだけの問題です。素晴らしいと思いませんか?そこで今日は、この素晴らしい見た目の関数を実装する方法を説明します。重要なことは、ほとんどのブラウザでは、CSS を実装するだけで済み、一部のフロントエンド開発エンジニアを怖がらせる JS を追加する必要がないということです。さあ、おじさんを追って自慢してみませんか。

ここでは、Web テキストの選択を無効にする 2 つの方法を示します。user-select は W3C CSS 標準属性ではないので、各タイプを設定する必要があります。ブラウザが適応し、CSS コードは次のようになります。

body

{

-moz-user-select: none; 🎜>

-webkit-user-select: none; /*webkit ブラウザ*/

-ms-user-select: none; /*IE10*/

-khtml-user -select: none ; /*初期のブラウザ*/

user-select: none;

}

ここに来るのは少し大変かもしれません。 IE6 ~ IE9 などの一部のローエンド ブラウザでは、IE6 ~ IE9 には関連する CSS プロパティがありません。これを解決するには 2 番目の方法を使用する必要があります。それは、js を使用して解決することです。 JSは本当に怖いです。

document.body.onselectstart = document.body.ondrag = function(){

return false;

}

これは IE6 ~ IE9 です。上記のjsのみで実現可能です。導入する際はブラウザのバージョンを判断する必要があります。その他は上記のjsを導入する必要がありません。 CSSで。

それでは、今日の共有はここで終わります。お役に立ちましたか?あるならそれを理解してください、そうでないなら私を責めてください!

私は若いおじさんです

フロントエンド開発エンジニア、個人 WeChat 公開アカウント: xuebing_wxb

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。