Question

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

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

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

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

当我什么也没输入时。我希望textarea的尺寸变小，最终消失。

但它正在扩大。 :(

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

Answer 1

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

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

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

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

代码不多，但是JavaScript和CSS的精心组合。如果由于某种原因您不想在项目中添加其他库，或者这不符合您的要求，则可能会指向正确的方向。祝好运。

Answer 2

我测试了你现有的代码，scrollWidth和scrollHeight给你的值远大于实际文本的大小。

获取实际文本大小的一种方法是使用与文本区域相同的字体样式创建跨度，将textarea的值复制到该跨度，然后将跨度附加到文档。然后，您可以使用getBoundingRect（）来获取跨度的尺寸，从而获得textarea中文本的尺寸。

注意：我更改了封闭div的ID。它与textarea具有相同的id，并且id应该是唯一的。拥有两个具有相同id的元素可能会导致javascript出现问题。这是jsfiddle：https://jsfiddle.net/yog8kvx7/7/。这里是更新的模糊功能：

$('.notesArea').blur(function (event)
{
    var content = $(this).val().trim();
    var element = document.getElementById(event.target.id);
    // Create span to calculate width of text
    var span = document.createElement('span');
    // Set position to absolute and make it hidden
    // so it doesn't affect the position of any other elements
    span.style.position = 'absolute';
    span.style.visibility = 'hidden';
    // Only set to whitespace to pre if there's content
    // "pre" preserves whitespace, including newlines
    if (element.value.length > 0)
        span.style.whiteSpace = 'pre-wrap';
    // Copy over font styling
    var fontStyle = window.getComputedStyle(element);
    span.style.display = 'inline-block';
    span.style.padding = fontStyle.padding;
    span.style.fontFamily = fontStyle.fontFamily;
    span.style.fontSize = fontStyle.fontSize;
    span.style.fontWeight = fontStyle.fontWeight;
    span.style.lineHeight = fontStyle.lineHeight;
    span.innerHTML = element.value;
    // Add to document and determine width
    document.body.appendChild(span);
    var rect = span.getBoundingClientRect();
    var width = rect.width;
    var height = rect.height;

    // Remove span from document
    span.parentNode.removeChild(span);

    $(this).animate({
        width: width,
        height: height
    }, 100);
});

如果您想要考虑小尺寸手柄，因此它不会覆盖文本，您只需在宽度上添加偏移量即可。

动画文本区域以适合文本区域的内容

2 个答案: