考虑我们要创建一个包含textarea的页面来键入文章. textarea的大小设置为A5纸张大小.对于长文本,当用户键入并完成第一个textarea时,需要在第一个textarea后添加另一个textarea以允许用户继续在下一页输入(类似于MS word).
你的建议是什么？
你的建议是什么？
.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>
解决方法
更新,在第二页添加删除句柄
我想这是你想要的,使用clientHeight和scrollHeight检测滚动.还剩下更多的东西给你
1.空页面上的空格或第一个字符之前的退格空格
2.在已经完整的页面中插入/删除
3.cus在页面之间移动
$('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>