このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Selection: rangeCount プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

Selection.rangeCount は読み取り専用のプロパティで、選択範囲に含まれる範囲の数を返します。

ユーザーが読み込まれたばかりのページをクリックする前は、rangeCount0 です。ユーザーがページをクリックすると、たとえ選択範囲が表示されていなくても、rangeCount1 になります。

通常、ユーザーは一度に 1 つの範囲しか選択できないため、rangeCount は通常 1 になります。スクリプトを使用すれば、選択範囲を複数に設定することも可能です。

Gecko ベースのブラウザーでは、表のセルをまたいで複数の範囲を選択することができます。Firefox では、Ctrl キーを押しながらクリックすることで、文書内から複数の範囲を選択することができます(ただし、display: table-cell という CSS プロパティが設定されている要素内でクリックした場合は除きます)。

数値です。

次の例では、1 秒ごとに rangeCount が表示されます。ブラウザーでテキストを選択すると、その値が変化するのが確認できます。

HTML

html
<table>
  <tbody>
    <tr>
      <td>a.1</td>
      <td>a.2</td>
    </tr>
    <tr>
      <td>b.1</td>
      <td>b.2</td>
    </tr>
    <tr>
      <td>c.1</td>
      <td>c.2</td>
    </tr>
  </tbody>
</table>

JavaScript

js
setInterval(() => {
  console.log(window.getSelection().rangeCount);
}, 1000);

結果

コンソールを開いて、選択範囲がいくつあるかを確認してください。Gecko ベースのブラウザーでは、Ctrl キー(macOS の場合は Cmd キー)を押したままマウスでドラッグすると、テーブルのセルをまたいで複数の範囲を選択できます。

仕様書

仕様書
Selection API
# dom-selection-rangecount

ブラウザーの互換性

関連情報

  • 所属先のインターフェイスである Selection