Jak dodać kolejne pole tekstowe, gdy tekst wewnętrzny pierwszego tekstu przekracza jedną stronę?

Question

Załóżmy, że utworzymy stronę zawierającą obszar tekstowy do wpisania artykułu. rozmiar obszaru tekstowego jest ustawiony na rozmiar papieru A5. W przypadku długich tekstów, gdy Typy użytkowników i wypełnia pierwsze pole tekstowe, wymagane jest dodanie kolejnego obszaru tekstowego do pierwszego obszaru tekstowego, aby umożliwić użytkownikowi kontynuowanie pisania na następnej stronie (coś w rodzaju słowa MS). Jaka jest Twoja sugestia?

.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

aktualizowane, dodać uchwyt do usunięcia w drugą stronę

---

to chyba chcesz, wykrywać Przewiń clientHeight i scrollHeight. I wiele więcej pozostaje dla ciebie

1. backspace na pustej strony lub backspace przed pierwszym char

2.Włóż/delete w już pełne strony

3.cusor poruszać się między stronami

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

To może być lepiej unikać pola tekstowe dla tego i po prostu użyj DIV. Jest o wiele bardziej elastyczny. Możesz utworzyć stronę DIV i po prostu dodać "bezwzględną" linię umieszczoną na każdym dystansie, ponieważ znasz dokładne wymiary.

Sprawdzałem, jak robi to Word w Internecie. Wydają się również stosować podejście DIV, ale bardziej skomplikowane.

Answer 3

Tak, jest to możliwe, patrz link (uważnie policzek).

To jest podgląd Link:https://codepen.io/ziruhel/pen/VrzpqG

Nie może mieć podobne zagadnienia. Myślę, że możesz go rozwiązać, jeśli potrzebujesz pomocy, proszę dać mi znać.

Jeśli chcesz z podglądem wydruku, to rozwiązanie jest dla Ciebie.

Podgląd 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 
}); 

Podgląd Link:https://codepen.io/ziruhel/pen/ZaJpNe