How to add another textarea when inner text of first textarea exceed one page

Question

Consider we're going to create a page containing a textarea for typing an article. the size of textarea is set to an A5 paper size. For long Texts when User types and completes the first textarea, It's required to add another textarea following to the first textarea to allow user continue typing in next page(something like MS word). What's your suggestion?

.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

updated, add handle for delete in second page

---

I guess this is you want, detect scroll using clientHeight and scrollHeight. And a lot more is left for you

1.backspace on empty page or backspace before first char

2.insert/delete in already full pages

3.cusor move between pages

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