Question

我有jQuery代码，用于在用户输入时自动调整textarea的大小。有没有办法让它在到达屏幕底部时停止？

<html>
<head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">    </script>
</head>
<style>
    .modalTextArea{
        overflow: hidden;
        z-index: 1; 
    }
</style>
<body>
    <div class="modal-content">          
        <textarea class='modalTextArea' rows = 2 style='width: 100%'></textarea>
    </div>
    <script src = 'js/script.js'></script>
</body>
</html>

$('.modalTextArea').on('keyup', function(e){
    $(this).css('height', 'auto');
    $(this).height(this.scrollHeight + 10);
});

Answer 1

我建议计算textarea中一行的行高，并在keyup事件中使用此值：

function getTextAreaLineHeight(className) {
  var element = $('.' + className);
  var txtSaved = element.text();
  var lineHeight = element.css('font-size', '12px').css('line-height', '1.25').text('x').height();
  element.text(txtSaved);
  return lineHeight;
}

$(function () {
  var txtAreaLineHeight = getTextAreaLineHeight('modalTextArea');
  $('.modalTextArea').on('keyup', function(e) {
    if (($(this).offset().top + $(this).height()) < ($(window).height() - txtAreaLineHeight)) {
      $(this).css('height', 'auto');
      $(this).height(this.scrollHeight + 10);
    }
  });
});

.modalTextArea{
  overflow: hidden;
  z-index: 1;
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<div class="modal-content">
    <textarea class='modalTextArea' rows = 2 style='width: 100%'></textarea>
</div>

Answer 2

要获取height of HTML document，您可以使用以下代码段：

$( document ).height();

每当按下回车键时，textarea会增加其大小，html高度也会增加。所以你需要做的只是获取初始的html高度，换句话说，在事件处理程序之外，然后使用if子句：

var htmlHeight = $( document ).height();

$('.modalTextArea').on('keyup', function(e){
    var elementHeight = this.scrollHeight;
    if( htmlHeight > elementHeight ) {
      $(this).css('height', 'auto');
      $(this).height(this.scrollHeight +10);
    }
});

如何阻止文本区域超出屏幕长度？

2 个答案: