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>

Please don't link to code at 3rd party sites as those links can die over time an then no one can understand your question. Just create a "code snippet" (7th button on toolbar) right in your question. — Scott Marcus, Nov 05 '17 at 16:33
So, what have your tried? What would the algorithm that determines when the textarea is full be? — Scott Marcus, Nov 05 '17 at 16:34
https://stackoverflow.com/questions/6042115/javascript-detect-textarea-to-be-full — Harsha Jayamanna, Nov 09 '17 at 07:15
How many characters the user need to full the first textarea? or how do the textarea know that it is completed? so the user enter the next textarea? — Blues Clues, Nov 09 '17 at 10:10
I tried using the functionality in this answer, but I couldn't get my code to add a new div when I had used up the space in the first one: https://stackoverflow.com/questions/22731394/max-lines-textarea/22732344#22732344 — Yvonne Aburrow, Nov 09 '17 at 14:31
Yes it is possible, see the link(please cheek carefully). **This is preview link:** https://codepen.io/ziruhel/pen/VrzpqG `Details answer is in bellow` — Zahidul Islam Ruhel, Nov 14 '17 at 21:52
You need take following steps: 1. get the text of A5. 2. Put it on the label or
3. than print it. — Ali Imran, Nov 15 '17 at 09:33

Josh Lin · Answer 1 · 2017-11-12T07:29:00.503

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>

but when I delete some lines from second textarea it's not being deleted. — Behnam, Nov 11 '17 at 17:24

Zahidul Islam Ruhel · Answer 2 · 2017-11-14T22:01:27.677

Yes it is possible, see the link(please cheek carefully).

This is preview link: https://codepen.io/ziruhel/pen/VrzpqG

There might have more related issue. I think you can solved it, if you need help, please let me know.

If You want it with print preview, Then this solution is for you.

Preview link: 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
});

Preview link: https://codepen.io/ziruhel/pen/ZaJpNe

score 1 · Answer 3 · answered Nov 13 '17 at 18:39

It might be better to avoid using textareas for this one and just use DIVs. It's a lot more flexible. You can create a pages DIV and simply add an 'absolute' positioned line every certain amount of distance, because you know the exact dimensions.

I've been looking at how Word online does this. They seem to use a DIV approach as well, but more complicated.

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

3 Answers3