2 
<div><span>aaaaaa</span> ... (many other span here) ... <span>zzzzzz</span></div>

その場合、ボックススパンはdiv内のいくつかのラインボックスに配置されます。（スパン要素は異なるフォントサイズを使用できます。）

1）ラインボックスの数をどのように知ることができますか？

2）要素スパンがどのラインボックスに配置されているかを知ることができますか？

3）カレットがどのラインボックスに配置されているか（コンテンツ編集可能）を知ることができますか？

ありがとうございました

4

2 に答える 2

2

あなたの例のDOMは、あなたのDOMの実際の複雑さの効果的な例であり、「ラインボックス」は単なるテキスト行であると思います。

<span>1-2）の内部ごとに<div>、次のようなものでそれらがまたがる行の数を数えることができます。

var spans = div.getElementsByTagName("span"), spandata = [];
for (var i = 0; i < spans.length; i++) {
    var rects = spans[i].getClientRects();
    if (i > 0)
        if (rects[0].bottom > obj.rects[obj.rects - 1].bottom)
            var inirow = obj.lastRow + 1;
        else var inirow = obj.lastRow;
    var obj = {
        element: spans[i],
        rects: rects,
        iniRow: inirow,
        lastRow: inirow + rects.length - 1
    };
    spandata.push(obj);
}

これで、要素spandataについて必要なすべてのデータのリストが表示されます。<span>また、それぞれが複数の行にまたがっている可能性があると思います。

getClientRectsIE<8にはいくつかの問題があることに注意してください。

3）最近のブラウザでは、このgetSelection方法は次のことに役立ちます。

var sel = window.getSelection();
if (sel.type === "Caret")
    var span = sel.anchorNode.parentNode;

ラインの位置については、簡単なことではないと言わざるを得ません。カレットのページ位置を簡単に取得することはできません。あなたができる最も簡単なことは、カレットの代わりにダミーのインライン要素を配置することです：

var text = sel.anchorNode.nodeValue;
sel.anchorNode.nodeValue = text.substring(0, sel.anchorOffset);
var dummy = document.createElement("i");
span.appendChild(dummy);
var pos = dummy.getBoundingClientRect();
sel.anchorNode.nodeValue = text;
span.removeChild(dummy);

posカレットの位置の情報が含まれています。次に、それらをスパンに関するrect情報と比較する必要があります。

var rects = span.getClientRects();
for (var i = 0; i < rects.length; i++)
    if (rects[i]].bottom === pos.bottom) break;

if (i < rects.length) {
   for (var i = 0; i < spandata.length; i++) {
       if (spandata[i].element === span) {
           var line = spandata[i].iniRow + i;
           break;
       }
   }
}

最後に、の場合line != null、それはカレットの線を含みます。

男、それは複雑だった...

于 2012-06-23T10:03:48.627 に答える
1

divあなたがel変数にいるとしましょう：

el.children.length; // Number of direct children

// You have one of the children in the "child" variable, to know its index:
[].indexOf.call( el.children, child ); // Index of child in el.children

ここではクロスブラウザの問題については触れていませんが、Array.prototype.indexOfIE9以降でのみ利用可能です（したがって、最新のすべてのブラウザで機能します）。

于 2012-06-23T10:00:42.250 に答える