Question

我尝试根据输入的文字自动展开/缩小textarea。 textarea的指定高度为250px，并且可以在450px使用滚动条启动之前自动展开overfow: auto。当文本输入到textarea时，它可以很好地工作，但是在粘贴大量文本时则不行。

请参阅此处的小提琴：https://jsfiddle.net/ynv6yta8/1/

和一个片段：

＆＃13;

// auto-expand/shrink text area
$('#mytextarea').bind('input propertychange paste', function() {
  var oldHeight = parseInt($(this).height());
  
  if (this.scrollHeight < 450) {
    $(this).height(0).height(this.scrollHeight);
  }
}).change();

＆＃13;

#mytextarea {
  height: 250px;
  width: 450px;
  min-height: 250px;
  min-width: 450px;
  resize: none;
  overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="mytextarea"></textarea>

＆＃13;

我没有在小提琴中留下任何调试语句，但事件确实在粘贴时被正确触发，但this.scrollHeight始终评估为250px左右，即使粘贴的文本也是如此非常大。我想在this.scrollHeight事件被解雇时paste尚未更新？我怎么能绕过这个？

Answer 1

这对我有用：

$(document).on("input", "textarea", function()
{
   $(this).prop('style').cssText = 'height:auto;';
   $(this).prop('style').cssText = 'height:' + $(this).prop('scrollHeight') + 'px';
});

Css：

textarea
{
    resize:none;
    max-height:450px;
    min-height:250px;
}

受https://codepen.io/vsync/pen/czgrf启发

jsfiddle：Here

jQuery - 自动扩展textarea不处理粘贴的输入

1 个答案: