Menu
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>
205
For input type="text" , we can use the size attribute to specify the visible size of the field, in characters. But we can also use the maxlength attribute to specify the maximum amount of characters that can be entered. Browsers generally enforce such a limit.
To add line breaks to a textarea, use the addition (+) operator and add the \r\n string at the place where you want to add a line break, e.g. 'line one' + '\r\n' + 'line two' . The combination of the \r and \n characters is used as a newline character.
To preserve line breaks when getting text from a textarea with JavaScript, we can replace whitespace characters with '<br>\n' . const post = document. createElement("p"); post. textContent = postText; post.
<textarea> does not support the value attribute.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).
As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default. The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:
The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
It works just how you likely hope it does. The textarea starts out a normal reasonable size. As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default. The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
