Question

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

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

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;
  }
}

jQuery的：

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

最好避免使用textareas，只使用DIV。它更加灵活。您可以创建一个页面DIV，只需在每个特定距离上添加一个“绝对”定位线，因为您知道确切的尺寸。

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

如何在第一个textarea的内部文本超过一页时添加另一个textarea

3 个答案: