如何实现textarea字符计数并根据计数结果切换字体颜色（<100红/>100绿）

嘿，我来帮你搞定这个字符计数的颜色切换需求！你的基础代码已经能实现计数功能了，只需要加一点简单的判断逻辑，就能根据计数结果动态改变字体颜色。

先给你完整的可运行代码，包含HTML和JavaScript部分：

完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!-- 给textarea绑定keyup事件，实时触发计数 -->
<textarea id="opis_siebie" onkeyup="countChar1(this)"></textarea>
<!-- 用来显示字符计数的容器 -->
<div id="charNum">0</div>

<script>
function countChar1(val) { 
  var len = val.value.length; 
  var charNumEl = $('#charNum');
  
  // 更新计数显示
  charNumEl.text(len); 
  
  // 根据字符长度切换颜色
  if (len < 100) {
    charNumEl.css('color', 'red');
  } else if (len > 100) {
    charNumEl.css('color', 'green');
  } else {
    // 可选：当字符数刚好为100时的颜色，这里设为默认黑色
    charNumEl.css('color', 'black');
  }
}; 
</script>

关键修改说明 #

• 补全了HTML结构：给textarea绑定onkeyup事件，确保用户输入时能实时触发计数；同时明确了用于显示计数的#charNum容器。
• 在计数函数里，先获取#charNum元素（避免重复查询DOM，稍微优化性能），再更新计数文本。
• 通过if-else分支判断字符长度：
  • 计数小于100时，字体设为红色
  • 计数大于100时，字体切换为绿色
  • 额外补充了等于100的场景，你可以根据需求调整这个分支的颜色，或者直接删掉它（如果不需要处理等于100的情况）

这样就能实现你想要的动态颜色切换效果啦！

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