以前に作った calculation of selection length (ソースはGitHub) を作る時に内容は選択された文字列の扱い関連について調べたことをメモメモです。 Chrome でのみ確認している。
選択文字数を取得
選択範囲は document.getSelection() または window.getSelection() で取得できる。
取得できるのは Selection オブジェクトなので、
var selectionLen = String(document.getSelection()).length;
の用な感じで String に変換してから取得する。
選択の変更をイベントで取得
どうやら標準ではないっぽいけど onselectionchange というイベントがあるみたい。
document.addEventListener("selectionchange", function(e){ console.log(e); }, false);
選択範囲の絶対位置を取得
絶対位置を取得は、
var getSelectionBoundingRect = function() {
var rect = { left: 0, top: 0, right: 0, bottom: 0 };
var selAll = document.getSelection();
for (var i = 0; i < selAll.rangeCount; ++i) {
var rect_ = selAll.getRangeAt(i).getBoundingClientRect();
if (rect_.left < rect.left) rect.left = rect_.left;
if (rect_.top < rect.top) rect.top = rect_.top;
if (rect.right < rect_.right) rect.right = rect_.right;
if (rect.bottom < rect_.bottom) rect.bottom = rect_.bottom;
}
rect.width = rect.right - rect.left;
rect.height = rect.bottom - rect.top;
rect.left += window.pageXOffset;
rect.top += window.pageYOffset;
rect.right += window.pageXOffset;
rect.bottom+= window.pageYOffset;
return selAll.rangeCount ? rect : null;
};
こんな感じ。