javascript – 如何在第一个textarea的内部文本超过一页时添加另一个textarea

考虑我们要创建一个包含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>

javascript – 如何在第一个textarea的内部文本超过一页时添加另一个textarea

解决方法

猜你在找的JavaScript相关文章