javascript - 文本区域未正确调整大小

Question

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

$(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什么时候<textarea>行等于 maxRows .

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>