HTML ページでテキストが選択されないようにするにはどうすればよいですか?

HTML ページ上のテキストの選択解除: 総合ガイド

ユーザー エクスペリエンスの領域では、HTML ページ上でテキストが選択されないようにすることが望ましい場合があります。 HTML ページ内の特定の要素。これは、タブ名などの要素に特に関係しており、強調表示すると魅力がなくなる可能性があります。

CSS ソリューション

幸いなことに、最新のブラウザーのほとんどは CSS ベースのソリューションを提供しています。

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

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

このコードをスタイルシートに追加するだけで、指定された要素は次のようになります。

IE および Opera の代替

Internet Explorer および Opera の以前のバージョンでは、unselectable 属性を使用できます。

<div>
<p>ただし、この属性は継承されないため、子孫ごとに明示的に設定する必要がある場合があることに注意してください。 element.</p>
<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"));