javascript - フォーカスを失うことなく、contentEditable を含む html 要素を dom の別のブランチに移動する

Question

この問題を解決できることを願っています。

私は、ヘッダー、フッター、本文、およびその本文内に多数の「DataItem」（3つの読み取り専用、1つの編集可能）を含むドキュメント内の2つの固定高ページを表す次のhtml構造（簡略化）を持っています。「Summary」と「Add New」の DataItem もあります。

DataItem の html のブロック (contentEditable 要素を含む可能性がある) をドキュメント内の別の位置に移動できるようにする必要があります。ただし、それが移動されている場合は、contentEditable 要素へのフォーカスを失わずにそうする必要があります。

このアクションは、ユーザーが contentEditable HTML エディターに入力しているときにトリガーされ、ユーザーが入力している DataItem が高くなります。そうすることで、下部の DataItem がフッターに重なり始めると、次のページに押し下げられます。ページをまたがることが許可されていない MS Word の表のセルに入力するのと少し似ています。

jQuery で動作する部分的なソリューションを取得できます。これにより、前の兄弟の高さが大きくなるにつれて、次の兄弟 DataItems が最初のページから 2 番目のページに移動しますが、これに関する問題は、フォーカスのある DataItem を移動しようとすると、フォーカスが失われ、ユーザーの入力の流れが中断されることです。 . 移動後に contentEditable div にフォーカスを戻そうとしましたが、選択範囲と範囲の問題、カーソル位置を見つけることができないことに加えて、スクロールバーがリセットされたにもかかわらずジャンプする問題により、解決策が信頼できないことが証明されました。

したがって、最初のページの最後の DataItem と次のページの最初の DataItem (存在する場合) の間のすべての html コンテンツを最後のデータ項目の前の位置に移動するという別のアプローチを試みました。 HTML コンテンツエディターがフォーカスを失うことはありませんが、DataItem が 2 ページ目に移動したような印象を与えます。

私が達成しようとした (そして失敗した) 機能は、html を "start-here" div と "end-here" div の間で切り取り、それを "paste-here" div に移動することです。div は、何を移動する必要があるかを示すプレースホルダーとして存在します。

ただし、jQuery dom 操作と RegEx 文字列置換を使用してさまざまな方法を試してみましたが、共通の祖先 (「Pages」div) を置き換えることを伴わない解決策を思いつくことができないため、現在のものを置き換える必要があります。 contentEditable - したがって、フォーカスが失われます。

ユーザーが中断することなく入力を続けることができるように、これを行う方法とフォーカスを維持する方法を知っている人はいますか?

よろしく、ジェレミー:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
.Document
{
    text-align:left;
    margin: 0px auto;
    display:inline-block;
    position:relative;
    /*border: 1px solid blue;*/
}

.Pages
{
    margin: 0px auto;
    position:relative;
    display:inline-block;
    /*border: 1px solid yellow;*/
}

.PortraitPage
{
    height:29.7cm;
    width:21cm;
    background: #ffffff;
    position:relative;
}
       .FirstPage
    {
        border: 1px dotted black;
    }

    .ExtraPage
    {
        margin-top:10px;
        margin-bottom:10px;
        border: 1px dotted black;
    } 

.PageHeader
{
    border: 0px dotted #e2e2e2;
    position:absolute;
    top:0px;
    width: 18cm;
    left:0cm;
}

.PageBody
{
    border: 1px dotted #c2c2c2;
    position:absolute;
    top:4.5cm; /* this needs to be whatever the height of the header is */
    width: 18cm;
    left:1.5cm;
    /*min-height:22cm;*/
}

.PageFooter
{
    border: 1px dotted #e2e2e2;
    position:absolute;
    bottom:0px;
    width: 18cm;
    left:1.5cm;
}

.PageSeparator
{
    background: #999999;
    height: 1cm;
    width: 21cm;   
}
.InvoiceItemsForm
{
    position: relative;
    /*top: 2.5cm;*/
}

/* This prevents the space added in contentcell divs in the html entry cell just for the PageEditor */
.InvoiceItemsForm div
{
    margin-bottom: 0px;
}

.LineItem_Panel_ReadOnly
{
    position:relative;
    border: 1px solid transparent;
}

.LineItem_Panel_ReadOnly_Hover
{
    position:relative;
    border: 1px solid #C2C2C2;
    background-color:#ffffff;
}

.LineItem_Panel_Edit
{
    position:relative;
    border: 1px solid #C2C2C2;
}


.LineItem_Panel_Insert
{
    position:relative;
    border: 1px solid green;
}

    </style>
</head>
<body>
    <div id="ctl00_phContent_pnlInvoicePage" class="Page FirstPage PortraitPage">
        <div class="FirstHeader PageHeader">
            First Page Header
        </div>
        <div class="ExtraHeader HiddenExtraPageSection">
            Hidden ExtraPage Header that is copied when a new page is created
        </div>
        <div id="ctl00_phContent_pnlInvoicePageBody" class="PageSection Body PageBody">
            <div id="ctl00_phContent_pnlInvoiceItemsForm" class="InvoiceItemsForm DataSection">
                <div id="ctl00_phContent_lvLineItems_ctrl0_pnlLineItemReadOnly" class="DataItem LineItem_Panel_ReadOnly InvoiceLineItem">
                    <div class="LineItem_Panel_HTMLContent">
                        <span id="ctl00_phContent_lvLineItems_ctrl0_lblHTMLContent">
                            <p>
                                aaaaaaaaaaaaaaa</p>
                            <p>
                                aaaaaaaaaaaaaa</p>
                        </span>
                    </div>
                </div>
                <div id="ctl00_phContent_lvLineItems_ctrl1_pnlLineItemReadOnly" class="DataItem LineItem_Panel_ReadOnly InvoiceLineItem">
                    <div class="LineItem_Panel_HTMLContent">
                        <span id="ctl00_phContent_lvLineItems_ctrl1_lblHTMLContent">
                            <p>
                                bbbbbbbbbbbbbbb</p>
                            <p>
                                bbbbbbbbbb</p>
                        </span>
                    </div>
                </div>
                <div id="ctl00_phContent_lvLineItems_ctrl2_pnlLineItemReadOnly" class="DataItem LineItem_Panel_ReadOnly InvoiceLineItem">
                    <div class="LineItem_Panel_HTMLContent">
                        <span id="ctl00_phContent_lvLineItems_ctrl2_lblHTMLContent">cccccccccccccc</span>
                    </div>
                </div>
                <div id="ctl00_phContent_lvLineItems_ctrl3_pnlLineItemEdit" class="DataItem LineItem_Panel_Edit InvoiceLineItem">
                    <div id="ctl00_phContent_lvLineItems_ctrl3_pnlHTMLEditor" class="HTMLEditorPanel">
                        <div style="width: 126px; height: 20px;" id="ctl00_phContent_lvLineItems_ctrl3_txtHTMLContent$HtmlEditorExtenderBehavior_ExtenderContainer"
                            class="unselectable ajax__html_editor_extender_container">
                            <input style="display: none; visibility: hidden;" id="ctl00_phContent_lvLineItems_ctrl3_txtHTMLContent"
                                name="ctl00$phContent$lvLineItems$ctrl3$txtHTMLContent" value="ddddddddddddd"
                                type="text" autocomplete="off">
                            <div style="height: 21px; overflow: auto; clear: both;" id="ctl00_phContent_lvLineItems_ctrl3_heeHTMLContent_ExtenderContentEditable"
                                class="ajax__html_editor_extender_texteditor" contenteditable="true">
                                <p>
                                    ddddddddddddd</p>
                                <p>
                                    &nbsp;</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="DataItem">
                    <p>
                        Click <a id="ctl00_phContent_lvLineItems_lbAddLineItem" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$phContent$lvLineItems$lbAddLineItem", "", true, "", "", false, true))'>
                            here</a> to add a new Data Item</p>
                </div>
                <div id="paste-here"></div>
                <div class="DataItem InvoiceTotals">
                    <div class="InvoiceSubTotal">
                        Sub Total: <span id="ctl00_phContent_lvLineItems_lblInvoiceSubTotal">18,110.00</span></div>
                    <div class="InvoiceVATTotal">
                        VAT Total: <span id="ctl00_phContent_lvLineItems_lblInvoiceVATTotal">3,111.00</span></div>
                    <div class="InvoiceTotal">
                        Invoice Total: <span id="ctl00_phContent_lvLineItems_lblInvoiceTotal">21,221.00</span></div>
                </div>
                <div id="start-cut"></div>
            </div>
        </div>
        <div class="FirstFooter PageFooter">
            First Page Footer
        </div>
        <div class="ExtraFooter HiddenExtraPageSection">
            Hidden ExtraPage Footer that is copied when a new page is created
        </div>
    </div>
    <div id="ctl00_phContent_pnlInvoicePage" class="Page ExtraPage PortraitPage">
        <div class="ExtraHeader PageHeader">
            Extra Page Header
        </div>
        <div id="ctl00_phContent_pnlInvoicePageBody" class="PageSection Body PageBody">
            <div id="ctl00_phContent_pnlInvoiceItemsForm" class="InvoiceItemsForm DataSection">
                <div id="end-cut"></div>
            </div>
        </div>
        <div class="ExtraFooter PageFooter">
            Extra Page Footer
        </div>
    </div>
</body>
</html>

score 0 · Accepted Answer

あなたが望む効果を達成するために何かを再親化する必要がある理由はわかりません。ブラウザーが必要な場所に物事をレンダリングするのに十分スマートであることに依存しようとすると、ブラウザーと同じブラウザーの異なるバージョン間で一貫性がなくなる可能性があるため、CSS と JavaScript を使用してアイテムを明示的に配置することをお勧めします。ユーザーが入力したテキストが長すぎて提供されたスペースに収まらない場合は、を使用node.style.top=newY; node.style.left=newX;して位置を変更したり、node.style.height=newHeight; node.style.width=newWidth;必要に応じてサイズを変更したりできます。これらのメソッドでは、ブラウザーが要素を削除して再挿入する必要がないため、フォーカスが失われたり、テキストの選択やカーソル位置が失われたりすることはありません。

javascript - フォーカスを失うことなく、contentEditable を含む html 要素を dom の別のブランチに移動する

1 に答える 1

Related

Reference