Webのテキストエリア入力で、入力補完を提供するサービスがあります。例えばGitHubのコメント欄です。この時、テキストエリアのキャレット位置を取得するのですが、意外と面倒だったりします。 そこでライブラリを使いましょう。Text Caret Positionを使えばキャレットのポジションが簡単に取得できます。

Text Caret Positionの使い方

input type="text" での利用例。キャレットの位置に赤い縦線を出すことで、まるでキャレットが赤線になっているように見えます。

テキストエリアでも使えます。

実際に利用する際のコードは次のようになります。

var textCaretPos = require('textarea-caret');

document.querySelector('textarea').addEventListener('input', function () {
  var coordinates = textCaretPos.getCoordinates(this, this.selectionEnd);
  console.log(coordinates.top);
  console.log(coordinates.left);
  console.log(coordinates.height);
})

top/leftで位置が分かりますので、その場所に入力補完になる情報をフローティングで表示すればいいだけです。情報を表示する機能はありませんので、カスタマイズしやすいでしょう。入力補完以外の使い方もできるはずです。

Text Caret PositionはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

input and textarea caret-position testing ground mmig/text-caret-pos: xy coordinates of a textarea or input’s caret