[jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った

textareaに表示されているキャレット位置(カーソル位置)の画面上のXY座標(ページの一番左上からの位置)を取得したいと思って検索したけれど、キャレットの文字列内の位置(何文字目)を取得するライブラリばかりで、画面上からの位置を取得できるライブラリがなかった。なので、テキストエリアを指定するだけで簡単に現在のキャレット位置の座標が分かるライブラリをつくった。サジェストを表示するWebアプリケーション(EclipseのようなIDEとか？)を作りたい時に便利。jQueryがなくても使えるし、jQueryがあっても使える。

githubにアップロードしているので、そちらも参照。
http://akiroom.github.com/caretposition.js/

以下、使い方の解説。

caretposition.jsの使い方

1. 使いたいHTML文書のheadタグ内に以下を追加して

    <script type="text/javascript" src="caretposition.js"></script> 

2. 調べたいところに以下のように書くだけ。

   var textArea = document.getElementById("textArea");
   var caretPosition = Measurement.caretPos(textArea);
   console.log(caretPosition.left);
   console.log(caretPosition.top);
   

3. jQueryを使っている場合は以下のようにも書ける。

   var caretPosition = Measurement.caretPos("#textArea");
   console.log(caretPosition.left);
   console.log(caretPosition.top);
   

ライセンス

MITライセンスです。

すごいところ

• 多言語対応。日本語もＯＫ．
  
• wrap=”off”での複数行表示・スクロール表示に対応
  
• もちろんワードラップされた複数行の表示にも対応
  

対応ブラウザ

Firefox 12.0, Safari 5.1.7, Google Chrome 19.0 で動作確認。(2012年6月6日現在)
他に対応しているブラウザがあったらコメント欄で教えてください。

Firefox 12.0

Safari 5.1.7

Google Chrome 19.0

詳しくは

githubのページを参照してください。
http://akiroom.github.com/caretposition.js/

Pocket

Tweet