如何使用 JavaScript/jQuery 创建自动调整大小的文本区域？

创建一个 textarea ，任务是在我们输入或粘贴内容时自动调整它的大小。它可以通过使用 JavaScript 和 jQuery 来实现。

方法 1：使用 JavaScript：要更改高度，会创建一个新函数来更改 textarea 的 style 属性。 textarea 的高度首先设置为auto 。该值使浏览器自动设置元素的高度。这将使文本可滚动，因为 textarea 高度小于文本。紧接着在下一行，高度再次设置为等于 scrollHeight 的高度。

scrollHeight属性用于返回元素的整个高度，包括以像素为单位的填充。这将使 textarea 高度等于整个文本区域的高度，有效地调整 textarea 的大小以适应文本。

只要 input 或 textarea 的值发生变化，就会触发 ‘input’ 事件。可以使用addEventListener()方法检测此事件。此方法的回调函数设置为上面创建的新函数。这将在检测到任何文本输入时触发 textarea 调整大小，因此会根据键入或粘贴的文本自动调整大小。

例子：

HTML

  

    
        How to create auto-resize textarea
        using JavaScript/jQuery?
    
  
    
        #autoresizing {
            display: block;
            overflow: hidden;
            resize: none;
        }
    

  

    
        GeeksforGeeks
    
      
    
        Creating a textarea with
        auto-resize in JavaScript
    
      
      

        The textarea below will resize
        automatically accounting for
        cut, paste and typing text.
    
  
      
            Try cutting, pasting
        or typing here
    
      
    
        textarea = document.querySelector("#autoresizing");
        textarea.addEventListener('input', autoResize, false);
      
        function autoResize() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        }
    

  

输出：

• 在编写任何文本之前：

• 写完文字后：

方法二：使用jQuery：与上面使用的方法类似。 jQuery 中的on()方法用于将事件处理程序附加到任何元素。首先选择 textarea，此方法用于在所选元素上应用事件处理程序。
在回调中声明了一个新函数，它改变了 textarea 的 style 属性。 textarea 的高度首先设置为 ‘auto’ 然后立即在下一行，高度再次设置为等于scrollHeight 的高度。

这将使 textarea 的高度等于整个文本区域的高度，有效地调整 textarea 的大小以适应文本。每当检测到输入更改并且 textarea 看起来会自动调整大小时，就会执行此函数。

例子：

HTML

  

    
        How to create auto-resize textarea
        using JavaScript/jQuery?
    
      
    
    
      
    
        #autoresizing {
            display: block;
            overflow: hidden;
            resize: none;
        }
    

  

    
        GeeksforGeeks
    
      
    
        Creating a textarea with
        auto-resize in JavaScript
    
      
      

        The textarea below will resize
        automatically accounting for cut,
        paste and typing text.
    
  
      
            Try cutting, pasting or typing here
    
      
    
        $('#autoresizing').on('input', function () {
            this.style.height = 'auto';
              
            this.style.height = 
                    (this.scrollHeight) + 'px';
        });
    

  

输出：

• 在编写任何文本之前：

• 写完文字后：

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。