Akiyamaプログラミングのメモや自分に関することを書いているブログです。textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作ったtextareaに表示されているキャレット位置(カーソル位置)の画面上のXY座標(ページの一番左上からの位置)を取得したいと思って検索したけれど、キャレットの文字列内の位置(何文字目)を取得するライブラリばかりで、画面上からの位置を取得できるライブラリがなかった。テキストエリアを指定するだけで簡単に現在のキャレット位置の座標が分かるライブラリをつくった。サジェストを表示するWebアプリケーション(EclipseのようなIDEとか?)を作りたい時に便利。jQueryがなくても使えるし、jQueryがあっても使える。githubにアップロードしているので、そちらも参照。https://akiroom.github.com/caretposition.js/以下、使い方の解説。src="caretposition.js"></script>調べたいところに以下のように書くだけ。Measurement.caretPos(textArea);console.log(caretPosition.left);console.log(caretPosition.top);jQueryを使っている場合は以下のようにも書ける。Measurement.caretPos("#textArea");console.log(caretPosition.left);console.log(caretPosition.top);ライセンスMITライセンスです。(2012年6月6日現在)他に対応しているブラウザがあったらコメント欄で教えてください。19.0詳しくはgithubのページを参照してください。18:43この方法ではたぶん、縦方向に限って、位置が完全には取得できていないと思います。同じようなイメージでテキストエリア内の入力済み文字の最後尾の縦の位置を取得しようとしたのですがその位置情報を元にして、マーキング画像をcssから配置させたとき改行を何度も繰り返すと、キャレットの位置とマーキング画像の位置が少しずつずれて行くのが分かります。backgroundのposition指定で検証してみてください。私の方はほとんど独学なので原始的なやり方で改行でline-height分、数値加算する方法で恐らくこのプログラムと等価な事をやっていますが期待通りになりませんでした。私が間違っていることも十分ありますのでコメント頂きたいです。解決できましたのでコメントさせて頂きます。textAreaStyle.lineHeight;が抜けているのが原因でした。よければご参考下さい。20:39ありがとうございます。手探り状態で作っていたため、アドバイスをいただけてありがたいです。JimiCityのソースコードを公開しました。