すべての本文コンテンツに対するテキスト選択を無効にするプロジェクトがあります。したがって、これに対する解決策は、通常のブラウザのCSSスタイル(のようなuser-select: none
)とIEの回避策(のようなdocument.body.onselectstart = function () { return false; }
)です。
したがって、問題は次のとおりです。IEの一部のdiv要素でテキスト選択を有効にするにはどうすればよいですか。そして、それを簡単かつ迅速に行う方法は?
すべての本文コンテンツに対するテキスト選択を無効にするプロジェクトがあります。したがって、これに対する解決策は、通常のブラウザのCSSスタイル(のようなuser-select: none
)とIEの回避策(のようなdocument.body.onselectstart = function () { return false; }
)です。
したがって、問題は次のとおりです。IEの一部のdiv要素でテキスト選択を有効にするにはどうすればよいですか。そして、それを簡単かつ迅速に行う方法は?
最も簡単な方法は、ロジックを逆にして、テキストを選択できないはずの要素にのみこのルールを適用することです。このルールを全身に適用する際の問題は、子要素が親(body)要素からこのオーバーライドされたイベントをすでに受信していることonselectstart
です。イベントを再初期化する方法は、一部の人が回答で想定しているほど簡単ではありません。ここ。あなたの場合、私は全身に対してこのルールを削除し、それから、オーバーライドルールが適用されてはならない子を持たない個々の要素にのみ適用します。
例:
<body>
this is some text that is selectable
<div style='-o-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-ms-user-select: none;
user-select: none;'
onselectstart='return false;'
unselectable='on'>
this is some text that's not selectable
</div>
</body>
> JSFiddleの作業デモを参照してください
リストされている個々のプロパティの一部はまだサポートされていないことに注意してください。将来を見据えて、とにかくそれらを追加しました。ルールセットは、できるだけ多くの異なるブラウザをサポートするようにコンパイルされています。CSSスタイルに従うものもあれば、JavaScriptハック(IE <10)が必要なものもあり、Operaブラウザーは特別な要素プロパティに従うものもあります(以下を参照)。
編集: Operaブラウザのサポートを追加しました(unselectable='on'
)
<div onselectstart='return true;'>blablabla</div>
document.body.onselectstart = function (event) {
if(event.srcElement.parentNode.id == 'mydiv')//you may need to loop if the parentNode is
{ //not a div element
return true;
}
else{
return false;
}
}
注: JavaScript を無効にすると、ユーザーはテキストを選択できるようになります
フィドルリンクを更新しました
jQueryを使用する
$("body").disableSelection();