最近、テキストエリアを拡張するようなライブラリが増えています。その一つに入力補完機能が挙げられます。IDEではよく見られる機能ですが、入力箇所(キャレット)を正しく取得しないと、逆に文字入力を妨げることになるでしょう。 そこで使ってみたいのがcaretposition.jsです。テキストエリアにおけるキャレットの位置をXY座標で取得できます。

caretposition.jsの使い方

デモです。左下にキャレットの座標が表示されています。

こんな感じで入力中も変化しています。

別なデモです。キャレットの位置に入力補完用のラベルを表示しています。

入力した後に戻ってもちゃんと追従されます。

caretposition.jsを使うとキャレットの位置がXY座標で取れますので、後はそれを使ってCSSで情報を表示すればいいでしょう。日本語特有の文字変換にも追従するので様々な利用が考えられそうです。

caretposition.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

akiroom/caretposition.js: Measurement.caretposition.js is useful to measure caret x-y position in textarea.