当第一个文本区域的内部文本超过一页时，如何添加另一个文本区域

Question

考虑我们将创建一个包含用于键入文章的文本区域的页面。 文本区域的大小设置为 A5 纸张大小。对于用户键入并完成第一个文本区域的长文本，需要在第一个文本区域后面添加另一个文本区域，以允许用户继续在下一页中键入（类似于MS word）。你有什么建议？

.A5 {
  width: 148mm;
  padding: 1cm;
  margin: 1px;
  box-sizing: border-box;
  height: 210mm;
  border: solid 1px;
  resize: none;
  display: block;
}
@page {
  size: A5;
  margin: 0;
  padding: 0;
}
@media print {
  .A5 {
    visibility: visible;
    position: fixed;
    top:0;
    left:0;
    z-index: 99;
    border:none;
  }
  body> :not(.A5){
    color: red;
    display:none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>
Paper Print Test
</h1>
<input type="button" value="print" onclick="window.print()"/>
<textarea class="A5">
  Article Text 
</textarea>

Answer 1

更新，在第二页中添加删除句柄

---

我想这是你想要的，使用 clientHeight 和 scrollHeight 检测滚动.还有更多的东西留给你

1.在空白页或backspace backspace在第一个字符之前

2.在已经整页中插入/删除

3.页面之间的移动

$('body').on('keyup', '.A5', function(e) {
  if ($(this)[0].clientHeight < $(this)[0].scrollHeight) {
    eatBackAndNew(this)
  } else if (e.keyCode == 8 || e.keyCode == 46) {
    //backspace=8,del=46
    if ($(this).val() === '' && !$(this).attr('data-first')) {
      $(this).prev().focus()
      $(this).remove()
    }
  }
})
//this can be more complicated if user paste 
function eatBackAndNew(textarea) {
  let str = $(textarea).val()
  let newStr = str.substr(str.length - 1, 1)
  $(textarea).val(str.substr(0, str.length - 1))
  let $newTextarea = $(`<textarea class="A5">${newStr}</textarea>`)
  $('.js-container').append($newTextarea)
  $newTextarea.focus()
}

.A5 {
  width: 148mm;
  padding: 1cm;
  margin: 1px;
  box-sizing: border-box;
  height: 210mm;
  border: solid 1px;
  resize: none;
  display: block;
}
@page {
  size: A5;
  margin: 0;
  padding: 0;
}
@media print {
  .A5 {
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    border: none;
  }
  body> :not(.A5) {
    color: red;
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>
  Paper Print Test
</h1>
<input type="button" value="print" onclick="window.print()" />
<div class="js-container"><textarea class="A5" data-first="true">
  Article Text 
</textarea>
</div>

Answer 2

是的，这是可能的，请参阅链接（请仔细脸颊）。

这是预览链接：https://codepen.io/ziruhel/pen/VrzpqG

可能还有更多相关问题。我想你可以解决它，如果你需要帮助，请告诉我。

如果您需要打印预览，那么此解决方案适合您。

预览链接：https://codepen.io/ziruhel/pen/ZaJpNe

.HTML：

<h1>
Paper Print Test
</h1>
<input type="button" value="print" onclick="window.print()"/>
<div class="A5-print">g</div>
<textarea class="A5">
  Article Text 
</textarea>

.CSS：

.A5,.A5-print {
  width: 148mm;
  padding: 1cm;
  margin: 1px;
  box-sizing: border-box;
}
.A5{
  border: solid 1px;
  height: 210mm;
  resize: none;
  display: block;
}
.A5-print{
  display: none;
}
@page {
  size: A5;
  margin: 0;
  padding: 0;
}
@media print {
  .A5-print{
    visibility: visible;
    z-index: 99;
    display: block;
    page-break-after: always !important;
    overflow: visible;
    white-space: pre;
    white-space: pre-wrap;
  }
  body :not(.A5-print){
     display:none;
  }
  *{
    page-break-after: always !important;
  }
}

j查询：

jQuery(function($){
  function copy_to_print_helper(){
    $('.A5-print').text($('textarea').val());
  }
  $('textarea').bind('keydown keyup keypress cut copy past blur change', function(){
    copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
  });
  copy_to_print_helper(); // on initial page load
});

预览链接：https://codepen.io/ziruhel/pen/ZaJpNe

Answer 3

最好避免为此使用文本区域，而只使用 DIV。它更加灵活。您可以创建一个页面 DIV，只需每隔一定距离添加一条"绝对"定位线，因为您知道确切的尺寸。

我一直在研究Word在线如何做到这一点。他们似乎也使用DIV方法，但更复杂。