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 pletes 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=".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>

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 pletes 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./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 5, 2017 at 16:32 Scott Marcus 65.9k66 gold badges5353 silver badges8080 bronze badges asked Nov 5, 2017 at 16:29 BehnamBehnam 1,06333 gold badges1414 silver badges3939 bronze badges 8

• 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 Commented Nov 5, 2017 at 16:33
• So, what have your tried? What would the algorithm that determines when the textarea is full be? – Scott Marcus Commented Nov 5, 2017 at 16:34
• stackoverflow./questions/6042115/… – Harsha Jayamanna Commented Nov 9, 2017 at 7:15
• How many characters the user need to full the first textarea? or how do the textarea know that it is pleted? so the user enter the next textarea? – Blues Clues Commented Nov 9, 2017 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: stackoverflow./questions/22731394/max-lines-textarea/… – Yvonne Aburrow Commented Nov 9, 2017 at 14:31

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 7 +25

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 plicated 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./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>

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

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