实时调整 textarea 字体大小的需求与原理
在网页开发中，我们有时会遇到这样的需求：当用户在 textarea 中输入的内容达到一定长度时，为了更好地适应界面布局或提升可读性，需要自动缩小字体大小。例如，默认字体为20px，当字符数超过50时，字体自动变为14px。实现这一功能的核心在于以下两点：
- 实时监听用户输入： 需要一个机制来检测 textarea 内容的每一次变化。
- 根据内容长度应用样式： 在内容变化时，获取当前字符长度，并根据预设的阈值动态修改 textarea 的 font-size 样式。
核心实现：使用 input 事件和条件逻辑
要实现上述功能，JavaScript是最佳选择。我们将利用 textarea 元素的 input 事件来捕获内容变化，并通过简单的条件判断来切换字体大小。
HTML 结构
首先，我们需要一个 textarea 元素。为了方便JavaScript访问，我们为其指定一个 id。
动态调整 Textarea 字体大小
动态调整 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' 事件会在