复制文本区域动画功能

Question

我的JS是有限的，我在复制我在Materialize框架中看到<textarea>功能时遇到了问题(滚动到<textarea>部分)。

我本质上希望我的<textarea>能够根据<textarea>.val()顺利扩展。与我提供的链接中的示例完全相同。

我的代码如下：

$('textarea').keyup(function() {
$(this).animate({height: 'auto'}, 250);
$(this).height(this.scrollHeight);
});

提前谢谢。

Answer 1

使用您的代码，您将在第一个 keyup() 处添加一个自动高度，然后在下一个 keyup() 上它仍然是自动的。

我认为你必须像这个堆栈一样获取行号，获取line-height，并计算每个keyup和keydown的适当高度。

所以也许像这样(我认为缺少移动滚动修复)：

// Should be in a JS utility file
String.prototype.lines = function() {
return this.split(/r*n/);
}
String.prototype.lineCount = function() {
return this.lines().length;
}
// The code
$(document).on('keyup keydown', 'textarea', function () {
var loElem = $(this),
lsValue = loElem.val();
loElem.animate({minHeight: lsValue.lineCount() * 14}, 250);
});

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