ユーザーが書いているときにキャレットの絶対位置を取得しようとしています。
document.caretRangeFromPoint(e.clientX, e.clientY) は知っていますが、イベントがキー押下の場合、e.clientX、e.clientY は未定義です。マウスクリックがこの情報を運び、キーのイベントがそうでないことが明らかなjsfiddleを作成しました。
var test = function(e) {
var output;
var el = document.getElementById("test");
var range = window.getSelection().getRangeAt(0);
var positionToUse = document.caretRangeFromPoint(e.clientX, e.clientY);
output = "Caret char pos: " + getCharacterOffsetWithin(range, el) + "<br>Position Pixels: " + e.clientX + " " + e.clientY
+ "<br>Position Pixels 2: " + e.target.offsetLeft + " " + e.target.offsetTop;
document.getElementById("output").innerHTML = output;
//positionToUse.insertNode(document.createElement('span'));
};
window.onclick = test;
window.onkeyup = test;
http://jsfiddle.net/NicoD/cgfHV/の完全なコード
キャレット位置を運ぶイベントを知っていますか?
ありがとうございました