ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS ルールによって選択されたテキストを無効にするコード例

CSS ルールによって選択されたテキストを無効にするコード例

黄舟
黄舟オリジナル
2017-04-18 09:44:171656ブラウズ

他の人に記事をコピーされたくない場合など、一部のシナリオではテキスト選択を無効にすることが依然として必要です。現時点では、CSS+JS を使用することでこの問題を解決できます。さらに、user-select はまだ正式な W3C 標準ではなく、各ブラウザがプライベート属性の形式でサポートを提供していることをここで指摘する必要があります。

構文

Formal syntax: none | text | all | element

コードは次のとおりです:

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;

コードは次のとおりです:

.row-of-icons {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */</p> <p> /* No support for these yet,use at own risk */
-o-user-select: none;
user-select: none;
}

IEの互換性

現在、IE 10およびIE 10以上のブラウザでは、-ms-userを使用できます。 -select ルール ただし、IE の以前のバージョンでは、JavaScript を通じてのみ選択されたテキストを禁止できました。

コードは次のとおりです:

$(el).attr(&#39;unselectable&#39;,&#39;on&#39;)
.css({&#39;-moz-user-select&#39;:&#39;-moz-none&#39;,
&#39;-moz-user-select&#39;:&#39;none&#39;,
&#39;-o-user-select&#39;:&#39;none&#39;,
&#39;-khtml-user-select&#39;:&#39;none&#39;, /* you could also put this in a class */
&#39;-webkit-user-select&#39;:&#39;none&#39;,/* and add the CSS class here instead */
&#39;-ms-user-select&#39;:&#39;none&#39;,
&#39;user-select&#39;:&#39;none&#39;
}).bind(&#39;selectstart&#39;, function(){
return false;
});


以上がCSS ルールによって選択されたテキストを無効にするコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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