ライブラリ概要

Caret Pos は、テキスト入力要素やiframe内のコンテンツ編集領域におけるカーソル（挿入ポイント）の位置を取得・設定するための軽量JavaScriptライブラリです。特にWYSIWYGエディタや動的フォームの開発において、正確なカーソル座標の取得が求められる場面で活用されます。本ライブラリはモダンなブラウザ環境を前提としており、SelectionおよびRange APIに依存しています。

導入と基本的な使い方

プロジェクトにCaret Posを統合するには、パッケージマネージャーを通じてインストールします。

npm install caret-pos
# または
yarn add caret-pos

インストール後、ESモジュール構文を使って必要な関数をインポートします。

import { position, offset } from 'caret-pos';

単純なinput要素に対してカーソル位置を取得する例：

const inputElement = document.querySelector('#text-input');
const cursorPosition = position(inputElement);
console.log(cursorPosition); // { top: 20, left: 45, height: 18 }

非対応ブラウザでの動作確認

Selection APIをサポートしていないレガシーブラウザ（例：IE11以前）では、本ライブラリは正常に動作しません。互換性の確認は以下の手順で行います。

1. caniuse.com にてSelection APIの対応状況を確認。
2. 対象ブラウザが非対応の場合、ポリフィルの適用を検討するか、代替手段としてDOMツリー走査に基づく独自実装を検討します。
3. 可能であれば、ブラウザアップグレードを推奨するユーザーメッセージを表示するなどのUX対策を実施します。

iframe内でのカーソル位置取得

iframe内部の編集可能領域でカーソル位置を正確に取得するには、特別な処理が必要です。

const frameElement = document.getElementById('editor-frame');
const editableBody = frameElement.contentDocument.body;

iframeの参照をオプションとして渡すことで、相対座標を補正できます。

const localPosition = position(editableBody, { iframe: frameElement });
const localOffset = offset(editableBody, { iframe: frameElement });

ページ全体に対する絶対座標を得る場合は、iframe自体のページ内オフセットを加算します。

import { getOffset } from 'caret-pos';
const containerOffset = getOffset(frameElement);
localOffset.left += containerOffset.left;
localOffset.top += containerOffset.top;

これにより、ポップアップツールチップやコンテキストメニューを正しい位置に配置できるようになります。