ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

  • DevRel
  • Com2