复制textarea动画功能

我的JS是有限的，并且我在复制<textarea>功能时遇到了问题，我在Materialize框架中看到过（滚动到<textarea>部分）。复制textarea动画功能

我基本上希望我的<textarea>根据<textarea>的.val()平稳扩展。完全像我提供的链接中的示例。

我的代码如下：提前

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

感谢。

来源

2017-05-06 danMad

看看的[代码，他们使用（https://github.com/ Dogfalo/materialize/blob/master/js/forms.js＃L121-L187）或者看看[这个答案]（http://stackoverflow.com/a/1761203/145346）如何获取行数在textarea;一旦你有了，你可以计算高度。 – Mottie

使用您的代码，您将在第一个keyup（）中添加一个自动高度，然后在下一个keyup（）时它仍然是auto。

我认为你必须让行号像this stack，得到了line-height，并计算出每个keyup和适当的高度。

因此，也许是这样的（缺少运动涡旋修复我认为）：

// 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>

来源

2017-05-06 17:35:07 Quanta

复制textarea动画功能

回答

相关问题