3

DOM 要素を使用して独自のテキスト選択を作成しようとしています。はい、この要素でテキストを選択したときにテキストの背後に表示される青い背景を意味します。アイデアは、デフォルトの動作 (青色) を停止し、独自の要素を使用して、選択範囲の xy 位置を見つけてから絶対配置要素を配置することで作業を行うことです。これを通常の で実行できるようにしたいdiv。

3つの要素が必要だと考えています。1 つは一番上の行 (不完全な場合があります)、1 つは中央のチャンク、1 つは最後の行 (一番上と同じ) です。理解に役立つ画像を次に示します。 必要な選択要素を示す画像

私はキャッチmouseup/downしてmousemoveからチェックすることを考えていましたwindow.getSelection()が、今のところどこにも行けません。

::selection要素にフォーカスがないため、CSS を使用しても機能しません。

私が得ることができるすべての助けに感謝します！前もって感謝します。

編集:役立つかもしれないhttps://code.google.com/p/rangy/に出くわしましたか? このプラグインの経験がある人はいますか?

Edit2: クロスブラウザーのサポートが必要です。

4

1 に答える 1

8

getClientRnge を使用できます。

var element = document.getElementById('element')

element.onmouseup = function(){
    var selection   = document.getSelection(),
        range       = selection.getRangeAt(0),
        clientRects = range.getClientRects()

    console.log(clientRects)
}

http://jsfiddle.net/XjHtG/

これは、行われたすべての選択の左、右、上、下、幅、および高さを返します。

于 2013-07-10T11:30:41.440 に答える