CSS と JavaScript を使用して HTML 要素のテキスト選択を無効にするにはどうすればよいですか?

HTML ページでのテキスト選択の無効化: CSS および JavaScript ソリューションの探索

Web 開発の領域では、ユーザーにシームレスなナビゲーション エクスペリエンスを提供することが最も重要です。ただし、ブラウザーのデフォルトの動作がこの目標を妨げる場合があります。そのような障害の 1 つは、ユーザーがダブルクリックしたとき、特にタブ名のような要素をダブルクリックしたときのテキストの自動選択です。この問題に対処するために、開発者はテキスト選択を無効にする方法を模索することがよくあります。

CSS ソリューション: 選択できないテキストのスタイリング

CSS は、さまざまなブラウザーでテキスト選択を無効にするための包括的なソリューションを提供します。特定のスタイル ルールを目的の要素に適用することで、開発者はデフォルトの強調表示動作を防ぐことができます。次の CSS コード サンプルは、この効果を実現します。

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

HTML 属性: 選択できない要素

バージョン 10 より前の Internet Explorer や Opera などのブラウザの場合、HTML 属性は代替アプローチを提供します。 unselectable 属性を「on」に設定すると、開発者は特定の要素を選択不可として指定できます。

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

これらの CSS および HTML/JavaScript テクニックを利用することで、開発者は HTML ページ内の特定の要素のテキスト選択を効果的に無効にし、ユーザー エクスペリエンスとユーザー エクスペリエンスを向上させることができます。視覚的に一貫したデザインを維持します。