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

【JavaScript入門】HTMLページ上のテキスト選択を解除する方法とサンプルコード

HTMLページ上のテキスト選択を解除するには？

Webアプリケーションを開発していると、「ユーザーが選択しているテキストをプログラム側から解除したい」という場面に出会うことがあります。たとえば、ドラッグ＆ドロップ操作の前処理や、UIの状態をリセットしたいときなどがその代表例です。

JavaScriptでは、window.getSelection()メソッドとremoveAllRanges()メソッドを組み合わせることで、ページ上のすべてのテキスト選択を簡単に解除できます。以下に具体的な実装例を紹介します。

実装例

次のコードは、ボタンをクリックするとページ内のテキスト選択がすべて解除されるシンプルなデモです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>HTMLページ上のテキスト選択を解除する</h1>
<div style="color: green;" class="result">
ここはdiv要素の中にあるテキストです
</div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、このページの選択状態がすべて解除されます</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        window.getSelection().removeAllRanges();
    });
</script>
</body>
</html>

コードのポイント

選択解除の処理で最も重要なのは、次の一行です。

window.getSelection().removeAllRanges();
  • window.getSelection()：現在のテキスト選択範囲を表すSelectionオブジェクトを取得します。
  • removeAllRanges()：Selectionオブジェクトに含まれるすべての範囲（Range）を削除し、選択状態を完全に解除します。

この処理をボタンのクリックイベント内で呼び出すことで、ワンクリックで選択をリセットできます。

実行結果

上記のコードをブラウザで開くと、次のように表示されます。

まず、ページ上で任意のテキストを選択した状態がこちらです。

【JavaScript入門】HTMLページ上のテキスト選択を解除する方法とサンプルコード

続いて、「CLICK HERE」ボタンをクリックします。

【JavaScript入門】HTMLページ上のテキスト選択を解除する方法とサンプルコード

すると、選択されていたテキストがすべて解除され、何も選択されていない初期状態に戻ります。

【JavaScript入門】HTMLページ上のテキスト選択を解除する方法とサンプルコード

まとめ

HTMLページ上のテキスト選択の解除は、window.getSelection().removeAllRanges()を呼び出すだけで簡単に実現できます。追加のライブラリも不要で、主要なブラウザすべてで動作する標準的なAPIなので、安心して使えます。フォームのリセット処理やカスタムUIの実装など、さまざまなシーンで役立つテクニックなので、ぜひ覚えておきましょう。

  1. JavaScriptで入力に合わせてHTMLテキストフィールドを自動的に拡張する方法

    通常の <input type=text> 要素は幅が固定されているため、入力した文字数に応じて自動的に伸びることはありません。このような場合は、<span> 要素を使用するのが効果的です。span はインライン要素なので、内包するテキストの量に応じて自然に幅が広がります。 ポイント：contenteditable属性の設定 <span> はそのままでは編集できません。ユーザーが入力できるようにするには、contenteditable=true を必ず設定してください。 contenteditable=true 実装例 <!DOCTYPE html&g

  2. 【JavaScript入門】文字列を繰り返す方法 – Array()とjoin()を組み合わせた実装例

    JavaScriptである文字列を指定した回数だけ繰り返して表示したい場合、Array()コンストラクタとjoin()メソッドを組み合わせることで簡単に実現できます。 仕組みの解説 new Array(value + 1)は、要素数が「value + 1」個の空の配列を生成します。この空の配列に対してjoin(this)を実行すると、各要素の間に区切り文字として自分自身（対象の文字列）が挿入されます。要素が value + 1 個あれば間は value 個できるため、結果的に元の文字列が value 回繰り返されるという仕組みです。 サンプルコード 以下に実際のコード例を示します。 <!