我希望你能解决这个问题.
我有以下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 …