本教程将详细介绍如何使用JavaScript动态调整HTML textarea 元素的字体大小，使其根据输入内容的字符长度自动切换。我们将重点讲解如何利用input事件监听用户输入，并通过条件逻辑实时更新样式，从而优化用户体验并提升界面的响应性。
实时调整 textarea 字体大小的需求与原理
在网页开发中，我们有时会遇到这样的需求：当用户在 textarea 中输入的内容达到一定长度时，为了更好地适应界面布局或提升可读性，需要自动缩小字体大小。例如，默认字体为20px，当字符数超过50时，字体自动变为14px。实现这一功能的核心在于以下两点：
实时监听用户输入： 需要一个机制来检测 textarea 内容的每一次变化。根据内容长度应用样式： 在内容变化时，获取当前字符长度，并根据预设的阈值动态修改 textarea 的 font-size 样式。
核心实现：使用 input 事件和条件逻辑
要实现上述功能，JavaScript是最佳选择。我们将利用 textarea 元素的 input 事件来捕获内容变化，并通过简单的条件判断来切换字体大小。
HTML 结构
首先，我们需要一个 textarea 元素。为了方便JavaScript访问，我们为其指定一个 id。
动态调整 Textarea 字体大小 body { font-family: Arial, sans-serif; padding: 20px; } textarea { width: 80%; height: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 20px; /* 默认字体大小 */ transition: font-size 0.2s ease-in-out; /* 添加过渡效果，使字体变化更平滑 */ resize: vertical; /* 允许垂直方向调整大小 */ }动态调整 Textarea 字体大小示例
JavaScript 逻辑
接下来是实现动态调整字体大小的JavaScript代码。我们将把这段代码放在一个名为 script.js 的文件中，并在HTML中引用。
// 获取 textarea 元素const textArea = document.getElementById('post');// 定义常量，提高代码可读性和维护性const CHARACTER_THRESHOLD = 50; // 字符阈值const FONT_SIZE_NORMAL = '20px'; // 默认字体大小const FONT_SIZE_SMALL = '14px'; // 缩小后的字体大小/** * 根据 textarea 内容长度调整字体大小的函数 */const adjustFontSize = () => { // 获取当前 textarea 的字符长度 const currentLength = textArea.value.length; // 根据字符长度判断并设置字体大小 if (currentLength > CHARACTER_THRESHOLD) { textArea.style.fontSize = FONT_SIZE_SMALL; } else { textArea.style.fontSize = FONT_SIZE_NORMAL; } // 也可以使用三元运算符简化上述判断： // textArea.style.fontSize = currentLength > CHARACTER_THRESHOLD ? FONT_SIZE_SMALL : FONT_SIZE_NORMAL;};// 为 textarea 元素添加 'input' 事件监听器// 'input' 事件会在