HTML UI でテキスト選択を無効にするにはどうすればよいですか?

UI エクスペリエンスを向上させるためにテキスト選択を無効にする

HTML ユーザー インターフェイスを設計する場合、タブ名などの一部のテキスト要素が選択されると望ましくないように見えることがあります。 。これを防ぐには、次のいずれかの方法を実装することを検討してください。

CSS ソリューション

ほとんどのブラウザでは、次の CSS スタイルによりテキストが選択できなくなる可能性があります:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

IE の HTML 属性とOpera

IE (バージョン 10 未満) や Opera などのブラウザの場合は、選択不可能な属性を使用します:

<div>
<p><strong>広範囲の選択不可能な領域に対する JavaScript 再帰</strong></p>
<p>ネストが関係する場合は、JavaScript を使用して再帰的に選択できない属性:</p>
<pre class="brush:php;toolbar:false">function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));