contenteditableのキャレットx,y座標を取得する。

2878 ワード
javacript contenteditable contenteditable テキストリンク

1.選択と範囲を取得する。

 var sel = window.getSelection();
 var range = sel.getRangeAt(0);

2.折りたたまれたdivを挿入。

 var div = document.createElement('div');  div.className = "test" // class名（自由）をつけておく。
 range.insertNode(div);

3.div座標を取得する（ここからjQuery必要。）

 console.log($(".test")[0].offsetTop,$(".test")[0].offsetLeft); // x,y座標が取得できた。

4.divを削除します。

 $(".test").remove();

情報源: https://stackoverflow.com/questions/17016698/get-caret-coordinates-on-a-contenteditable-div-through-javascript