如何使用JavaScript/jQuery创建自动调整大小的textarea

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

方法1：使用JavaScript：要改变高度，需要创建一个新的函数，改变textarea的样式属性。首先将textarea的高度设置为auto。这个值使浏览器自动设置一个元素的高度。这将使文本可以滚动，因为textarea的高度小于文本的高度。紧接着在下一行，高度又被设置为等于scrollHeight。

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

每当一个输入或文本区域的值发生变化时，”输入 “事件就会被触发。这个事件可以通过addEventListener()方法来检测。这个方法的回调函数被设置为上面创建的新函数。这将在检测到任何文本输入时触发文本区调整大小，因此根据输入或粘贴的文本自动调整大小。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to create auto-resize textarea
        using JavaScript/jQuery?
    </title>
  
    <style>
        #autoresizing {
            display: block;
            overflow: hidden;
            resize: none;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Creating a textarea with
        auto-resize in JavaScript
    </b>
      
      
<p>
        The textarea below will resize
        automatically accounting for
        cut, paste and typing text.
    </p>
  
      
    <textarea id="autoresizing">
        Try cutting, pasting
        or typing here
    </textarea>
      
    <script type="text/javascript">
        textarea = document.querySelector("#autoresizing");
        textarea.addEventListener('input', autoResize, false);
      
        function autoResize() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        }
    </script>
</body>
  
</html>

输出:

在写任何文字之前。

如何使用JavaScript/jQuery创建自动调整大小的textarea？

写完文字后。

如何使用JavaScript/jQuery创建自动调整大小的textarea？

方法2：使用jQuery：它与上面使用的方法类似。jQuery中的on()方法被用来给任何元素附加一个事件处理程序。首先选择textarea，然后用这个方法在所选元素上应用一个事件处理程序。
在回调中声明了一个新函数，它改变了textarea的样式属性。文本框的高度首先被设置为’auto’，然后在下一行中，高度又被设置为等于scrollHeight的高度。

这将使textarea的高度等于整个文本区的高度，有效地调整textarea的大小以适应文本。每当检测到输入的变化时，这个函数就会被执行，并且文本区会出现自动调整大小。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to create auto-resize textarea
        using JavaScript/jQuery?
    </title>
      
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
      
    <style>
        #autoresizing {
            display: block;
            overflow: hidden;
            resize: none;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Creating a textarea with
        auto-resize in JavaScript
    </b>
      
      
<p>
        The textarea below will resize
        automatically accounting for cut,
        paste and typing text.
    </p>
  
      
    <textarea id="autoresizing">
        Try cutting, pasting or typing here
    </textarea>
      
    <script type="text/javascript">
        $('#autoresizing').on('input', function () {
            this.style.height = 'auto';
              
            this.style.height = 
                    (this.scrollHeight) + 'px';
        });
    </script>
</body>
  
</html>

输出: