jQuery输入框字符限制与计数显示

限制输入字数的 input 文本框，配个字符计数器，体验立马高级不少。用jQuery来搞这个功能挺顺手的，逻辑也简单：监听input事件，实时更新剩余字符数。适合放在评论框、昵称输入、表单那种不想让用户打太多字的场景里。加个标签专门显示剩下的字数，用户看着也安心，不容易超限。

HTML 结构就是个加，没啥难的：

<input type="text" id="limitedInput" maxlength="100">
<span id="countDisplay">100</span> 字符剩余

jQuery代码也清爽，一看就懂：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var maxLength = 100;
  var $input = $('#limitedInput');
  var $countDisplay = $('#countDisplay');

function updateCount() {
    var currentLength = $input.val().length;
    var remainingChars = maxLength - currentLength;
    if (remainingChars < 0) {
      remainingChars = 0;
      $input.val($input.val().substring(0, maxLength));
    }
    $countDisplay.text(remainingChars + ' 字符剩余');
  }
$input.on('input', updateCount);
  updateCount();
});
</script>

你要是表单多、项目杂，建议封装成函数或者小组件，后面复用也方便。顺带一提，maxlength只是前端限制，别忘了服务端也要兜底，防止被绕过。

想看更多相关的方案？下面这些资源也蛮值得一逛的：

• JS 控制 input 输入字符限制
• input 限制输入格式 jQuery 插件
• jQuery 表单输入文字计数显示代码
• JQuery textlimit 显示用户输入的字符数

如果你表单多、用户输入要求比较细，可以结合pattern属性或正则进一步控制，体验会更严谨。