テキストを読み取り専用/非選択にする

Question

インラインCSSを使用して一部のテキストを読み取り専用にしようとしています。これらのメソッドは両方とも、標準のhtmlページを使ってテストするときにうまく動作します。

Firefoxの構文：

<div style="-moz-user-select: none;">Some text</div> 

クローム構文：

<div style="-webkit-user-select: none;">Some text</div> 

しかし、私はCMSの製品に使用されるテキストエディタでこの構文を使用しようとしています。 Firefoxではうまく動作しますが、Chromeではうまく動作しません。私はまた、動作しない最も基本的なアプローチを使用して試してみました：

<div style="user-select: none;">Some text</div> 

私の質問は、あるテキストのブロックを無効にするには、インラインCSS（またはHTML）を使用して、任意の他の方法があります。フリーテキストエディタを使用しているため、HTML入力タイプは使用できません。

Answer 1

一つは、以下のように3つのすべてのインラインCSSを組み合わせることができます：それはあなたが言及したすべてのブラウザで動作するはず

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Some text</div> 

この方法です。 一つはHow to disable text selection highlighting using CSS?から引用された説明としてリンクポスト で提案された一つのクラスには、このCSSをラップすることができます：

-webkit-タッチコールアウト：なし。/* iOS Safari /
-webkit-user-select：none;/クロム/サファリ/オペラ/
-khtml-user-select：none;/ Konqueror /
-moz-user-select：none;/ Firefox /
-ms-user-select：none;/ Internet Explorer/Edge /
user-select：none;/非接頭辞バージョン、現在はすべてのブラウザでサポートされて ません*/

一つでも選択することを防止するために、いくつかのJavaScriptのプロパティを使用することができます。

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">Some text</div>