Javascript 将包含contentEditable的html元素移动到dom中的另一个分支而不丢失焦点
我希望你能帮助解决这个问题 我有下面的html结构（简化），它表示一个文档中的两个固定高度页面，其中包含页眉、页脚、一个正文和许多“数据项”（3个只读，1个可编辑）。还有“摘要”和“添加新”数据项 我需要能够将DataItem的html块（可能包含contentEditable元素）移动到文档中的另一个位置。但是，如果要移动的是contentEditable元素，我需要这样做，而不会失去对该元素的关注 当用户在contentEditable HTML编辑器中键入内容，并且他们正在键入的数据项变高时，会触发此操作。这样，当底部数据项开始与页脚重叠时，它会被向下推到下一页。有点像在MS Word中的表格单元格中键入不允许跨页中断的内容 我可以使用jQuery获得部分解决方案。这会将下一个同级数据项从第一页移动到第二页，因为上一个同级数据项的高度会增加，但问题是，当我移动具有焦点的数据项时，它会失去焦点并中断用户的输入流。我曾尝试在移动contentEditable div后将焦点放回该div，但选择和范围方面的问题以及无法找到光标位置的问题，再加上滚动条在重置后仍会跳转的问题，都证明该解决方案太不可靠 因此，我尝试了另一种方法，将第一页的最后一个数据项和下一页的第一个数据项（如果有）之间的所有html内容移动到最后一个数据项之前的位置，希望这样做可以防止html内容编辑器失去焦点，但是仍然给人这样的印象，数据项已经移到了第二页 我尝试（但失败）实现的功能是在“开始于此处”和“结束于此处”div之间剪切html，并将其移动到“粘贴于此处”div。这些div仅作为占位符显示应移动的内容 然而，尽管尝试了使用jQuery dom操作和正则表达式字符串替换的各种方法，但我似乎无法想出一个不涉及替换公共祖先（即“Pages”div）的解决方案，因此必须替换当前contentEditable，从而失去焦点 有人知道我如何做到这一点并保持焦点，以便用户可以继续不间断地输入吗 问候,， 杰里米：）Javascript 将包含contentEditable的html元素移动到dom中的另一个分支而不丢失焦点,javascript,jquery,html,dom,contenteditable,Javascript,Jquery,Html,Dom,Contenteditable,我希望你能帮助解决这个问题 我有下面的html结构（简化），它表示一个文档中的两个固定高度页面，其中包含页眉、页脚、一个正文和许多“数据项”（3个只读，1个可编辑）。还有“摘要”和“添加新”数据项 我需要能够将DataItem的html块（可能包含contentEditable元素）移动到文档中的另一个位置。但是，如果要移动的是contentEditable元素，我需要这样做，而不会失去对该元素的关注 当用户在contentEditable HTML编辑器中键入内容，并且他们正在键入的数据项变高
.文件
{
文本对齐：左对齐；
保证金：0px自动；
显示：内联块；
位置：相对位置；
/*边框：1px纯蓝色*/
}
.页
{
保证金：0px自动；
位置：相对位置；
显示：内联块；
/*边框：1px纯黄色*/
}
.肖像页
{
身高：29.7厘米；
宽度：21cm；
背景：#ffffff；
位置：相对位置；
}
.首页
{
边框：1px点黑色；
}
.外页
{
边缘顶部：10px；
边缘底部：10px；
边框：1px点黑色；
}
.页眉
{
边框：0px点#e2；
位置：绝对位置；
顶部：0px；
宽度：18厘米；
左：0厘米；
}
.PageBody
{
边框：1px点#c2c2；
位置：绝对位置；
顶部：4.5cm；/*这需要是收割台的任何高度*/
宽度：18厘米；
左：1.5厘米；
/*最小高度：22厘米*/
}
.PageFooter
{
边框：1个点#E2；
位置：绝对位置；
底部：0px；
宽度：18厘米；
左：1.5厘米；
}
.PageSeparator
{
背景#999999；
高度：1厘米；
宽度：21cm；
}
.InvoiceItems表单
{
位置：相对位置；
/*顶部：2.5厘米*/
}
/*这可以防止仅为页面编辑器在html条目单元格的contentcell div中添加空间*/
.InvoiceItemsForm分区
{
边缘底部：0px；
}
.LineItem\u面板\u只读
{
位置：相对位置；
边框：1px实心透明；
}
.LineItem\u面板\u只读\u悬停
{
位置：相对位置；
边框：1px实心#C2C2；
背景色：#ffffff；
}
.LineItem\u面板\u编辑
{
位置：相对位置；
边框：1px实心#C2C2；
}
.LineItem_面板_插入
{
位置：相对位置；
边框：1px纯绿色；
}
首页页眉
创建新页面时复制的隐藏外部页面标题
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbb
bbbbbbbbbbbb
中交
dddddddddddddd
单击以添加新的数据项
小计：18110.00
增值税总额：3111.00
发票总额：21221.00
<!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>
</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>