2

サンプル

これは、編集可能なdiv内のテキストです。これは、複数の行、段落などにまたがることができます。私がやりたいのは、ここでキャレットの相対的な位置を見つけることです。つまり、キャレットは div またはドキュメントに対して相対的に {top:'5px', left:'250px'} に配置されます。

アイデアは、ドロップダウンにオプションを提供することです。これは直接可能ですか、またはなどに基づいてソリューションを作成する必要がありdiv line-height, padding,.. + caret positionますか?

4

2 に答える 2

5

rangy のこのデモを確認してください。多分あなたが探しているもの：

https://github.com/timdown/rangy/blob/master/demos/position.html

コードを見ると、次のことがわかります。

var startPos = rangy.getSelection().getStartDocumentPos(); // get x, y of selection/cursor

そして、あなたは使用することができstartPos.xますstartPos.y

于 2012-08-15T08:48:56.910 に答える
1

私は Rangy のコードを掘り下げました (それは素晴らしい! しかし、私の使用例に完全に含めるのはやり過ぎです)。誰かが完全なクロスブラウザー互換性を必要としない限り、彼女はネイティブのワンライナーを使用することができます:

var pos = window.getSelection().getRangeAt(0).getClientRects()[0]

topそして、利用可能な、bottom、rightおよびleftonがありますpos （うそをつきました-本当にワンライナーではありません。範囲があるかどうかを確認するためにラップする必要があります）。

Firefox で動作する必要があるだけなので、それで十分です。

概要：

  • Firefox 17 / Chrome 23 で完全に動作します (キャレットを追跡するだけで、実際の選択がなく、キャレット ブラウジングを有効にする必要もありません)
  • ただし、ページの空の部分 (テキストではなく) をクリックする と、実際にはキャレットがどこかに移動することF7に注意してください ( Firefox でキャレット ブラウジングを有効にして場所を確認してください)。段落間をクリックすると、通常は段落の終わり (段落の隣、またはカーソルのすぐ上にある最も近いテキストをクリックした場合) になります。
  • Opera 12 では、空でない選択がある場合にのみ機能します。
  • IE8 では動作しません。IE9 や IE10 では確認していません。

デモ (JSFiddle では動作しないため、ここに完全にダンプします):

<!DOCTYPE html>
<head>
    <script type="text/javascript">
    var getSelectionTopLeft = function (){
        var selection = window.getSelection();
        var rangePos, x, y;
        if(selection.rangeCount) {
            rangePos = window.getSelection().getRangeAt(0).getClientRects()[0];
            // you can get also right and bottom here if you like
            x = parseInt(rangePos.left);
            y = parseInt(rangePos.top);
            console && console.log("found selection at: x=" + x + ", y=" + y);
        }else{
            x = 0;
            y = 0;
            console && console.log("no selections found");
        }
        return {x: x, y: y};
    }
    var move = function (offsetX, offsetY){
        var coords = getSelectionTopLeft();
        var square = document.getElementById('square');
        square.style.left = (coords.x + offsetX) + 'px';
        square.style.top = (coords.y + offsetY) + 'px';
    }
    </script>
    <style type="text/css">
    #square {position:absolute; top:0; left:0; width:10px; height:10px; background-color:red;}
    </style>
</head>

<body>
    <h1>Caret position test</h1>
    <div id="square"></div>
    <button onclick="move(5, 5)">move the square 5px/5px below the caret</button>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur tempor pharetra iaculis. Ut tempor mauris et ligula
    aliquam sed venenatis dui pharetra. Duis dictum rutrum venenatis.
    Cras ut lorem justo.</p>

    <p>Nam vehicula elit tincidunt nibh elementum venenatis. Duis a facilisis sem.
    Morbi luctus porttitor feugiat. Nunc feugiat augue eu tortor interdum fermentum
    a tincidunt felis.</p>
</body>
</html>
于 2012-11-30T00:30:34.973 に答える