質問: ### 前提・実現したいこと Web上で動作するエディタを作ろうとしています。 キャレットの位置を判定するために getSelection() でキャレットが何文字目にあるのかを取得していたのですが、一文が長く文章が折り返されたときにキャレットの位置が正確に取得できない問題に直面しました。 言葉では非常にわかりにくいのでサンプルを用意しました。 サンプル内で「こ」の右をクリックしたとき offset の値は10です。 しかし「さ」の左をクリックしても offset の値は10となります。 (「こ」の右でも「さ」の左でも10文字目と11文字目の間だから同じoffsetの値になるのは理解しています) この2つの状態を区別して判定する方法はないでしょうか? ### 試したこと * getSelection()で取得できる情報は一通り見たのですが、差異はなさそうでした。 * 様々なキーワードで検索もしました。キャレットの座標を取得する方法などヒットしましたが、文章の折り返し地点についての言及は見つかりませんでした。 ### 補足情報 サンプルと同様、contenteditable な div で開発しています。
回答: 座標位置をとるなら ``` window.getSelection().getRangeAt(0).getBoundingClientRect() ``` でDOM Rectが取れるのでxやyプロパティを参照ください