如何实现textarea输入字符数达阈值时动态修改字体大小

你的代码无法正常运行是因为存在4个核心问题：

• 事件名称拼写错误：文本框输入监听的标准事件名是input，没有末尾的s，写inputs根本不会触发绑定的函数
• 作用域错误：你把numOfEnteredChars定义在countCharacters函数内部，函数外的if判断根本访问不到这个变量，会直接报引用错误
• 逻辑执行时机错误：字号判断的if语句写在事件绑定外面，只会在页面刚加载的时候执行1次，后续用户输入、删除内容时根本不会重新判断
• 参数写错+逻辑缺失：你把阈值后的字号写成了1px（需求是14px），而且没写字符数低于50时的字号回退逻辑，用户删除内容到50字以下后，字号无法恢复为默认20px

HTML部分 #

只需要补全初始字号样式，修正placeholder里的笔误即可：

<textarea 
  name="post" 
  placeholder="What's on your mind?" 
  id="post"
  style="font-size: 20px; width: 320px; height: 160px; padding: 12px; resize: none;"
></textarea>

初始字号也可以写在独立CSS里，效果一致。

JavaScript部分 #

// 等待页面DOM渲染完成后再执行逻辑，避免JS写在元素前面时获取不到节点
document.addEventListener('DOMContentLoaded', () => {
  const textArea = document.getElementById("post");
  // 把配置项抽成常量，后续调整参数直接改这里即可
  const CHAR_THRESHOLD = 50;
  const DEFAULT_FONT_SIZE = "20px";
  const SMALL_FONT_SIZE = "14px";

  // 字号调整逻辑统一封装
  const adjustTextareaFontSize = () => {
    const currentCharCount = textArea.value.length;
    textArea.style.fontSize = currentCharCount >= CHAR_THRESHOLD ? SMALL_FONT_SIZE : DEFAULT_FONT_SIZE;
  };

  // 绑定正确的input事件，输入、删除、粘贴、剪切内容都会触发
  textArea.addEventListener("input", adjustTextareaFontSize);
  // 页面初始化时执行一次，兼容textarea预填充默认内容的场景
  adjustTextareaFontSize();
});

• 所有字号判断逻辑都放在事件回调内，每次内容变化都会实时计算字符数更新字号
• 用三元表达式简化分支判断，同时覆盖了字号回退的场景
• 增加DOM加载完成监听，规避初学者常遇到的「获取元素为null」报错
• 所有阈值、字号参数都抽为常量，后续维护不需要改动核心逻辑

内容的提问来源于stack exchange，提问作者Omaru