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

Animate text area to fit the contents of the text area

本文关键字：文本 区域 动画      更新时间：2023-09-26

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

我目前使用以下代码来做:

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/

我认为你正在寻找的是一个弹性文本区域。有几个JavaScript库提供了这个功能:

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

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

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

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

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

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

注意:我改变了你的封闭div的id。它有相同的id作为文本区域，和id应该是唯一的。拥有两个具有相同id的元素可能会导致javascript出现问题。这是网址: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);
});

如果你想要解释小尺寸句柄，所以它不覆盖文本，你可以添加一个偏移宽度来解释它

相关文章：