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

Question

考虑我们要创建一个包含textarea的页面来键入文章.textarea的大小设置为A5纸张大小.对于长文本,当用户键入并完成第一个textarea时,需要在第一个textarea后添加另一个textarea以允许用户继续在下一页输入(类似于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.cus在页面之间移动

$('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>