📌  相关文章
📜  如何使用 JavaScript/jQuery 创建自动调整大小的文本区域?

📅  最后修改于: 2021-11-25 04:05:49             🧑  作者: Mango

创建一个 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?
    
  
    

  

    

        GeeksforGeeks     

                    Creating a textarea with         auto-resize in JavaScript                   

        The textarea below will resize         automatically accounting for         cut, paste and typing text.     

                             


HTML


  

    
        How to create auto-resize textarea
        using JavaScript/jQuery?
    
      
    
      
    

  

    

        GeeksforGeeks     

                    Creating a textarea with         auto-resize in JavaScript                   

        The textarea below will resize         automatically accounting for cut,         paste and typing text.     

                             


输出:

  • 在编写任何文本之前:

js-输入之前

  • 写完文字后:

js-输入后

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

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

例子:

HTML



  

    
        How to create auto-resize textarea
        using JavaScript/jQuery?
    
      
    
      
    

  

    

        GeeksforGeeks     

                    Creating a textarea with         auto-resize in JavaScript                   

        The textarea below will resize         automatically accounting for cut,         paste and typing text.     

                             

输出:

  • 在编写任何文本之前:

jq-输入前

  • 写完文字后:

jq-输入后

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