javascript - 动画文本区域以适应文本区域的内容

Question

我想调整文本区域的大小以适应文本区域的内容。

我目前正在使用以下代码来执行此操作:

var element = document.getElementById(event.target.id);
var content = $(this).val().trim();

if (content == "") {
    $(this).animate({
        width: element.scrollWidth,
        height: element.scrollHeight
    }, 100);
}

当我什么都不输入时。我希望文本区域变小并最终消失。

但它反而在扩张。 :(

JSFiddle:http://jsfiddle.net/7vfjet1g/

Answer 1

我认为您正在寻找的是 flex 文本区域。有一些 JavaScript 库提供此功能:

https://github.com/chemerisuk/better-elastic-textarea

https://github.com/chrisgeo/elastic-textarea

http://unwrongest.com/projects/elastic/

它的代码不多，而是 JavaScript 和 CSS 的精心组合。如果出于某种原因您不想将另一个库添加到您的元素中，或者这不符合您的要求，它可能会为您指明正确的方向。祝你好运。