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

黄舟
リリース: 2017-04-18 09:44:17
オリジナル
1622 人が閲覧しました

他の人に記事をコピーされたくない場合など、一部のシナリオではテキスト選択を無効にすることが依然として必要です。現時点では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート