数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
服装研究
法律研究使用JavaScript创建自动调整大小的文本区域
在这篇文章中，我们将学习如何在JavaScript中设置一个自动调整大小的文本区域。这个文本区域能够根据其中的内容自动改变其高度。JavaScript中的自动调整大小文本是一个有用的功能，可以用于编辑多行文本。文本可以根据其内部内容自动更改其高度。文本区域的默认行为不允许这样做，但是我们可以通过在其上使用input事件监听器来创建它。
让我们通过一些示例了解如何动态调整文本区域元素的高度：
示例1
在本例中，我们将：
使用ID选择文本区域并添加input事件监听器。
当用户调整文本大小时，我们首先将文本高度设置为滚动高度，然后将文本高度设置为auto（默认），最后根据内容调整文本高度。
文件名 - index.html
<html>
<head>
<title>Creating auto-resize text area using JavaScript</title>
<style>
#container {
width: 310px;
}
textarea {
width: 100%;
resize: none;
overflow: hidden;
}
</style>
</head>
<body>
<h3>Auto-resize Text Area</h3>
<div id="container">
<textarea id="myTextArea" rows="1" placeholder="Enter text..."></textarea>
</div>
<script>
const textArea = document.getElementById("myTextArea");
textArea.addEventListener("input", function () {
this.style.height = "auto";
this.style.height = this.scrollHeight + "px";
});
</script>
</body>
</html>
输出
结果将如下图所示。
示例2
在这个例子中，我们将：
定义一个resizeTextArea()函数，该函数在input事件发生时和resize事件发生时（窗口大小调整时）都会被调用。
这样做的目的是为了在用户在键入时调整窗口大小的情况下保持文本区域的正确高度。
文件名 - index.html
<html>
<head>
<title>Creating auto-resize text area using JavaScript</title>
<style>
#container {
width: 310px;
}
textarea {
width: 100%;
resize: none;
overflow: hidden;
}
</style>
</head>
<body>
<h3>Auto-resize Text Area</h3>
<div id="container">
<textarea id="myTextArea" rows="1" placeholder="Enter text..."></textarea>
</div>
<script>
const textArea = document.getElementById("myTextArea");
function resizeTextArea() {
textArea.style.height = "auto";
textArea.style.height = textArea.scrollHeight + "px";
}
textArea.addEventListener("input", resizeTextArea);
window.addEventListener("resize", resizeTextArea);
</script>
</body>
</html>
输出
结果将如下图所示。
结论
总之，使用JavaScript的自动调整大小文本区域功能为处理多行文本输入和根据内部内容更改文本区域的高度提供了用户友好的体验。通过使用事件监听器和DOM操作，我们能够创建一个自动调整大小的文本区域。我们学习了使用JavaScript自动调整大小文本区域的概念，并通过一些示例进行了说明。
更新于：2023年8月16日
703 次浏览
广告