☰

HTML ページでテキストを選択できないようにする方法はありますか? [重複] 質問する

tag-icon • tag-icon javascript html css cross-browser textselection
HTML ページでテキストを選択できないようにする方法はありますか? [重複] 質問する

タブ名などのテキスト要素を含む HTML UI を構築していますが、選択すると見栄えが悪くなります。残念ながら、多くのブラウザでは、ユーザーがタブ名をダブルクリックするとデフォルトでタブ名が選択されてしまうため、非常に簡単にダブルクリックできてしまいます。

JavaScript のトリックでこの問題を解決できるかもしれません (その答えも見てみたいです)。しかし、すべてのブラウザーで直接機能する CSS/HTML の何かがあることを本当に願っています。

ベストアンサー1

ほとんどのブラウザでは、CSS を使用してこれを実現できます。

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

unselectableIE < 10 および Opera の場合、選択不可にする要素の属性を使用する必要があります。これは、HTML の属性を使用して設定できます。

<div id="foo" unselectable="on" class="unselectable">...</div>

残念ながら、このプロパティは継承されないため、 内のすべての要素の開始タグに属性を配置する必要があります<div>。これが問題になる場合は、代わりに 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"));

おすすめ記事