Question

我正在创建一个应用程序，我在Jquery中创建了一个MS-word类型的应用程序。现在我有一个问题，我有一个编辑器，我想在某个位置放置一个div'页脚'我可以做的实际问题是，当我放置它时，页脚div占用的位置 - 可编辑的应该是禁用。检查这个小提琴Demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="wrapper" style="border:1px solid #eaedf1; width:602px; background-color:white;">

<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1; padding:2px 2px 2px 2px;"> 
</div>
<br>
<div style="position:absolute; top:750px; width:600px; height:200px; border:1px solid #eaedf1;">

<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">

</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
</div>

<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
  <div>

Answer 1

我不确定这是否可以通过一个满足的元素轻松实现。我使用多个contenteditable元素设置了一个基本示例，每个页面一个。

示例：https://fiddle.jshell.net/d68ew9qc/

如果达到每页的最大行数并且使用的密钥为＆＃34;请输入＆＃34;以下代码段添加新页面：

$(".pageEdit").on('keypress', function(e) {
  var length = $(this).children().length + 1;
  /* only add a new page if the next sibling is not available */
  // enter
  if (e.which == 13 && length >= this.getAttribute("max_rows")) {
    if ($(this).parent('.page').next().length === 0) {
      var newPage = $('.page').clone(true);
      $('.pageEdit', newPage).html('');
      newPage.appendTo('#editor');
      $('.pageEdit', newPage).focus();
    }
    e.preventDefault();
    return false;
  }
});

keypress使用class =＆＃34; .page＆＃34;复制元素。并且在新创建的元素上消耗了满足的元素。

keyup处理空页的退格删除。

$(".pageEdit").on('keyup', function(e) {
    var length = $(this).children().length;
  var total_pages = $(this).parent('.page').parent().children().length;
  // backspace is not working with keypress, this portion needs some work!!!
  if (e.which == 8 && $(this).parent('.page').prev().length > 0) {
    if (length === 0 && total_pages > 1) {
        // found via: http://stackoverflow.com/a/4238971/3298029
        placeCaretAtEnd($('.pageEdit>div:last', $(this).parent('.page').prev())[0]);
        $(this).closest('.page').remove();
    }
  }
});

基本的html如下所示：

<style>
.editor {
  background-color: transparent;
  border: 1px solid #eaedf1;
}

.page {
  width: 600px;
  position: relative;
  margin-top: 15px;
  background-color: #fff;
}

.header {
  height: 100px;
  width: 100%;
  margin: 0;
}

.footer {
  height: 100px;
  bottom: 0;
  width: 100%;
  margin: 0;
}

.pageEdit {
  min-height: 1400px;
  border: 1px solid #eaedf1;
  overflow: hidden;
  padding: 0;
}


/* found: http://stackoverflow.com/a/4407335/3298029 */

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
  pointer-events: none;
}

</style>    
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
      <div id="editor">
        <div class="page">
          <div class="header noselect">
            <h2 style="text-align:center;">This is header</h2>
          </div>
          <div contenteditable="true" class="pageEdit" max_rows="77">
          </div>
          <div class="footer noselect">
            <h2 style="text-align:center;">This is footer
        </h2>
          </div>
        </div>
      </div>
    </div>

这是一个相当简单的演示，很多东西都不起作用。如果一行换成新行，也应该处理。

这仅在Chrome中进行了测试，为新行增加了<div><br /></div>。 Firefox只会添加<br /><br />。因此，考虑到这一点，应该动态计算总行数，而不是设置为固定值，因为它会从一个浏览器推迟到另一个浏览器。

希望这能让你开始。

Answer 2

尝试使用css pointer-events: none;或select: none;或jQuery

$("#div").click(function(e){e.preventDefault();});

或者

$("#div").click(function(e){e.stopPropagation();});

（不是100％明确你的意图）。

Answer 3

你有什么特别的理由想要使用＆＃39; position：absolute＆＃39;？我想如果我改变代码以使用＆＃39; relative＆＃39;位置，它显示您想要的结果。例如：

<div id="wrapper" style="border:1px solid #eaedf1; width:602px;background-color:white;">
  <div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
  </div>
  <div contenteditable="true" style="overflow:hidden;height:1400px; width:600px; border:1px solid #eaedf1;"> 
  </div>
  <div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
  </div>
  <div style="background-color:#eaedf1;height:10px; width:600px;">
  </div>

  <div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
  </div>
  <div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1;"> 
  </div>
  <div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
  </div>
</div>

请参阅： https://jsfiddle.net/alejuliet/qn4k7csu/

如果具有样式绝对位置的div重叠在特定位置，如何阻止可编辑的内容

3 个答案: