将包含contentEditable的html元素移动到dom中的另一个分支而不会失去焦点

Question

将包含contentEditable的html元素移动到dom中的另一个分支而不会失去焦点

pri*_*rej 5 html javascript jquery dom contenteditable

我希望你能解决这个问题.

我有以下html结构(简化),它表示文档中的两个固定高度的页面,其中包含页眉,页脚,正文和一些"DataItems"(3个只读,1个可编辑).还有一个"摘要"和"添加新"DataItems.

我需要能够将DataItem的html块(可能包含contentEditable元素)移动到文档中的另一个位置.但是,我需要这样做,而不会失去焦点到contentEditable元素,如果它是被移动的.

当用户输入contentEditable HTML编辑器并且他们键入的DataItem变得更高时,将触发此操作.当它这样做时,当底部DataItem开始与页脚重叠时,它会被下推到下一页.有点像在MS Word中键入表格单元格,不允许跨页面.

我可以使用jQuery获得部分解决方案.这会将下一个同级DataItems从第一页移动到第二页,因为之前的兄弟高度增长,但问题是当我移动具有焦点的DataItem时,它会失去焦点并打破用户的打字流程.我已经尝试在移动它之后将焦点放回到contentEditable div,但是选择和范围问题并且无法找到光标位置以及滚动条跳转问题尽管它们被重置后再次证明该解决方案太不可靠.

因此,我尝试了一种不同的方法,即将第一页的最后一个DataItem和下一页的第一个DataItem(如果有)之间的所有html内容移动到最后一个数据项之前的位置,希望这样做可以防止html内容编辑器失去了焦点,但仍然给人的印象是DataItem已经向下移动到第二页.

我尝试(并且失败)实现的功能是剪切"start-here"和"end-here"div之间的html并将其移动到"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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Per*_*ins 0

我不认为您有任何理由必须重新调整任何内容才能达到您想要的效果。我建议使用 CSS 和 javascript 来显式定位项目，而不是试图依赖足够智能的浏览器来将内容呈现在您想要的位置，这将证明在浏览器之间以及同一浏览器的不同版本之间会不一致。当用户输入的文本太长而无法容纳所提供的空间时，您可以使用node.style.top=newY; node.style.left=newX;它来重新定位它，并node.style.height=newHeight; node.style.width=newWidth;根据需要调整它的大小。这些方法不需要浏览器删除并重新插入元素，因此焦点不会丢失，文本选择或光标位置也不会丢失。

归档时间：	12 年，8 月前
查看次数：	676 次
最近记录：	12 年，6 月前