複製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動畫功能

回答

相關問題