CSS ルールによって選択されたテキストを無効にするコード例-CSSチュートリアル-php.cn

他の人に記事をコピーされたくない場合など、一部のシナリオではテキスト選択を無効にすることが依然として必要です。現時点では、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+ */
  /* 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('unselectable','on') .css({'-moz-user-select':'-moz-none', '-moz-user-select':'none', '-o-user-select':'none', '-khtml-user-select':'none', /* you could also put this in a class */ '-webkit-user-select':'none',/* and add the CSS class here instead */ '-ms-user-select':'none', 'user-select':'none' }).bind('selectstart', function(){ return false; });

ログイン後にコピー

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