JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素のテキスト選択の有効・無効を設定する方法（userSelectプロパティの使い方）

userSelectプロパティでテキスト選択を制御する

JavaScriptでは、userSelectプロパティを使用することで、要素内のテキストをユーザーが選択できるかどうか（有効・無効）を簡単に制御できます。テキスト選択を無効にしたい場合は、値に「none」を設定します。

ただし、ブラウザによって実装が異なるため、クロスブラウザ対応として以下のプロパティを併用するのが一般的です。

  • userSelect … 標準プロパティ（モダンブラウザ向け）
  • WebkitUserSelect … Chrome・SafariなどWebKit系ブラウザ向け
  • MozUserSelect … Firefox向け（値に「none」を設定して選択を無効化）

サンプルコード

以下のコードを実行すると、ボタンをクリックした際に、指定した要素のテキスト選択を無効にする動作を確認できます。

実行例

<!DOCTYPE html>
<html>
   <body>
      <button onclick = "myFunction()">クリック</button>

      <div id = "box">
         上のボタンをクリックしてください。このテキストは選択できなくなります。userSelectプロパティの使用例です。
      </div>

      <script>
         function myFunction() {
            var a = document.getElementById("box");
            a.style.userSelect = "none";

            // ChromeとSafariで動作
            a.style.WebkitUserSelect = "none";

            // Firefoxで動作
            a.style.MozUserSelect = "none";
         }
      </script>
   </body>
   
</html>

動作のポイント

ボタンをクリックすると、idが「box」のdiv要素に対してuserSelectプロパティ（およびベンダープレフィックス付きの各プロパティ）に「none」が設定されます。その結果、該当要素内のテキストがマウスやキーボードで選択できなくなります。

逆に、選択を再度有効にしたい場合は、値を「auto」に戻せばOKです。コピー防止やUIの操作性向上など、さまざまな場面で活用できるテクニックなので、ぜひ覚えておきましょう。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. CSSのuser-selectプロパティでテキスト選択の可否を設定する方法

    CSSでは、user-selectプロパティを使用することで、要素内のテキストがユーザーによって選択可能かどうかを制御できます。例えば、ボタンやコピーライト表記など、ユーザーに選択されたくないテキストに対してuser-select: none;を指定すると、ドラッグしてもテキストが選択されなくなります。基本的な使い方以下の例では、div要素にuser-select: none;を適用しています。このスタイルが設定された要素内のテキストは、マウスやタッチ操作でも選択できません。サンプルコード<!DOCTYPE html> <html> <head>