本文概述
创建一个文本区域, 任务是在我们键入或粘贴内容时自动调整其大小。可以通过使用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 >输出如下：
- 在编写任何文本之前：
- 写完文字后：
方法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 >输出如下：
- 在编写任何文本之前：
- 写完文字后：
