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

本文概述

HTML
HTML

创建一个文本区域, 任务是在我们键入或粘贴内容时自动调整其大小。可以通过使用JavaScript和jQuery来实现。
方法1：使用JavaScript：要更改高度, 将创建一个新功能, 该功能会更改文本区域的style属性。首先将textarea的高度设置为auto。此值使浏览器自动设置元素的高度。这将使文本可滚动, 因为textarea高度小于文本。紧接在下一行, 高度再次设置为等于scrollHeight的高度。
的scrollHeight属性用于返回元素的整个高度, 包括以像素为单位的填充。这将使textarea高度等于整个文本区域的高度, 从而有效地调整textarea的大小以适合文本。
只要输入或文本区域的值发生更改, 就会触发"输入"事件。可以使用addEventListener()方法。此方法的回调函数设置为上面创建的新函数。每当检测到任何文本输入时, 这都会触发文本区域的大小调整, 因此会根据要键入或粘贴的文本自动调整大小。
例子：
HTML

< !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" > lsbin < / 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的大小（）

文章图片

写完文字后：

文章图片
方法2：使用jQuery：它类似于上面所使用的方法。jQuery中的on()方法用于将事件处理程序附加到任何元素。textarea首先被选中，这个方法用于对选中的元素应用事件处理程序。
在回调中声明了一个新函数, 该函数更改了textarea的style属性。首先将文本区域的高度设置为"自动", 然后在下一行立即将其高度再次设置为等于scrollHeight.
这样可以使文本区域的高度等于整个文本区域的高度, 从而有效地调整文本区域的大小以适合文本。每当检测到输入变化并且文本区域似乎会自动调整大小时, 将执行此功能。
例子：
HTML

< !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" > lsbin < / 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 >

【如何使用JavaScript/jQuery创建自动调整textarea的大小（）】输出如下：