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>3 Answers
Answers 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>Answers 2
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
Answers 3
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.
0 comments:
Post a Comment