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>

広範囲の選択不可能な領域に対する JavaScript 再帰

ネストが関係する場合は、JavaScript を使用して再帰的に選択できない属性:

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"));

以上がHTML UI でテキスト選択を無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。