Question

我正在使用jQuery自动调整<textarea>的大小。您可以尝试下面的代码段。

$(document).ready(function(){
  $('textarea').autoresize()
})

$.fn.autoresize = function(minRows=1, maxRows=5) {
  var e = $(this)
  e.attr('rows', minRows).css({'resize':'none'}).on('input', function(){ resize(e) })

  var state = 0
  function resize(e) {
    if (e.attr('rows') <= maxRows) {
      e.attr('overflow', 'hidden')
      if (e[0].scrollHeight>e.innerHeight() && e.attr('rows') < maxRows) {
        e.attr('rows', +e.attr('rows')+1)

        if (state) {
          state = 2
        }

        resize(e)
      } else if (e.attr('rows') > minRows) {
        if (state == 2) {
          state = 0
        } else {
          state = 1
          e.attr('rows', +e.attr('rows')-1)
          resize(e)
        }
      }
    } else {
      e.attr('overflow', 'auto')
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea style="width: 200px"></textarea>

如果在第一行上键入，<textarea>将在需要溢出其值时添加新行。但是，当您键入第二行，依此类推时，<textarea>将添加新行，即使它不必溢出也是如此。

起初我以为是因为滚动条，但是我已经将overflow设置为hidden，并且只有当overflow: scroll行等于{{ 1}}。

Answer 1

偶然地，我将overflow设置为hidden作为属性而不是样式。因此，这个e.attr('overflow', 'hidden')应该是e.css('overflow', 'hidden')

这是工作代码

$(document).ready(function(){
    $('textarea').autoresize()
  })

  $.fn.autoresize = function(minRows=1, maxRows=5) {
    var e = $(this)
    e.attr('rows', minRows).css({'resize':'none'}).on('input', function(){ resize(e) })

    var state = 0
    function resize(e) {
      if (e.attr('rows') <= maxRows) {
        e.css('overflow', 'hidden')
        if (e[0].scrollHeight>e.innerHeight() && e.attr('rows') < maxRows) {
          e.attr('rows', +e.attr('rows')+1)

          if (state) {
            state = 2
          }

          resize(e)
        } else if (e.attr('rows') > minRows) {
          if (e.attr('rows') == maxRows && e[0].scrollHeight>e.innerHeight()) {
            e.css('overflow', 'auto')
          }

          if (state == 2) {
            state = 0
          } else {
            state = 1
            e.attr('rows', minRows)
            resize(e)
          }
        }
      }
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea style="width: 200px"></textarea>

Answer 2

类似：

$(document).ready(function() {

  $("#text").focus(function() {
    $("#text").attr("row", "10");
    $("#text").attr("style", "width: 100px");
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="text" style="width: 200px" row="5"></textarea>

Textarea无法正确调整大小

2 个答案: