Moving an html element containing contentEditable for another branch in dom without losing focus

Question

Moving an html element containing contentEditable for another branch in dom without losing focus

Hope you can help with this issue.

I have the following html (simplified) structure, which represents two pages of a fixed height in a document with headers, footers, body and the next “DataItems” (3 times a year, 1 is edited) inside this body. There is also a Summary and Add New DataItems.

I need to move the html DataItem block (which may contain the contentEditable element) to a different position in the document. However, I need to do this without losing attention to the contentEditable element if it moves.

This action is triggered while the user enters text into the HTML Content Editor, and the DataItem that they enter becomes higher. Since this happens when the footer DataItem begins to overlap the footer, it goes to the next page. A bit like typing in a table cell in MS Word, which is not allowed to break pages.

I can get a partial solution working with jQuery. This moves the next child DataItems from the first page to the second page as the previous brother grows, but the problem is that when I move to moving the DataItem object with focus, it loses focus and interrupts the user input stream, I tried to return the focus back to contentEditable div after moving it, but problems with the selection and range and the inability to find the cursor position plus problems with scrolling jumps, despite the fact that they were reset back, proved that the solution is too unreliable.

, html- DataItem DataItem ( ) , , html , , DataItem .

, ( ), - html div "start-here" "end-here" div "paste-here". , , .

, jQuery dom RegEx, , , div "Pages", , , 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>

+5

javascript jquery dom html contenteditable

pridmorej 26 . '13 23:52

1

Perkins · Answer 1 · 2013-05-23T04:07:55+0000

, - , . , , , , , , , , CSS javascript . , , , , node.style.top=newY; node.style.left=newX; , node.style.height=newHeight; node.style.width=newWidth; - , . , , , .

Moving an html element containing contentEditable for another branch in dom without losing focus

More articles: