原生JavaScript文本框字数限制与实时提示

原生 JS 的文本框字数限制提示功能，简单干净，不用引入 jQuery 或其他插件，性能也挺不错的。只要配合 HTML 的 maxlength 和监听 input 事件，就能轻松实现字数提示。

文本框的字数限制多时候都用得到，比如评论、昵称、留言框。你只要在 标签上加个 maxlength 属性，就能直接限制最大输入长度。

实时字数提示怎么搞？其实也不难，监听 input 事件就行了。每次用户输入，就更新一下提示语，比如“还可以输入 XX 个字符”。

你可以用下面这段代码快速搞定：

// 获取文本框
var input = document.getElementById('myInput');
var maxLength = input.maxLength;

// 创建提示元素
var counter = document.createElement('span');
counter.textContent = '还可以输入 ' + maxLength + ' 个字符';
document.body.appendChild(counter);
// 监听输入变化
input.addEventListener('input', function() {
  var currentLength = this.value.length;
  counter.textContent = '还可以输入 ' + (maxLength - currentLength) + ' 个字符';
if (currentLength > maxLength) {
    alert('已超过最大字数限制！');
    this.value = this.value.substring(0, maxLength);
  }
});

注意哦，这段代码默认把提示插在了 body 后面。你要是页面结构比较复杂，记得把提示元素插在合适的位置，样式也可以自己调调。

用原生 JS 搞定这些事，适配性强、响应也快。如果你只是想限制一下输入长度，又不想引库，这种写法就挺适合的。