当前位置：首页 > JavaScript

js 实现maxlength

2026-04-05 09:20:48JavaScript

实现 maxlength 的方法

使用 HTML5 的 maxlength 属性

在 input 或 textarea 元素上直接使用 maxlength 属性可以限制用户输入的最大长度。这是最简单的方法，无需 JavaScript。

<input type="text" maxlength="10">
<textarea maxlength="50"></textarea>

通过 JavaScript 监听输入事件

如果需要更灵活的控制（如显示剩余字符数），可以通过 JavaScript 监听输入事件并截断超出部分。

js 实现maxlength

const input = document.querySelector('input');
const maxLength = 10;

input.addEventListener('input', function() {
  if (this.value.length > maxLength) {
    this.value = this.value.substring(0, maxLength);
  }
});

显示剩余字符数

在限制输入长度的同时，可以显示剩余可输入的字符数。

js 实现maxlength

<input type="text" id="limited-input">
<div id="remaining-chars">剩余 10 字符</div>

const input = document.getElementById('limited-input');
const remainingChars = document.getElementById('remaining-chars');
const maxLength = 10;

input.addEventListener('input', function() {
  const currentLength = this.value.length;
  if (currentLength > maxLength) {
    this.value = this.value.substring(0, maxLength);
    remainingChars.textContent = '剩余 0 字符';
  } else {
    remainingChars.textContent = `剩余 ${maxLength - currentLength} 字符`;
  }
});

处理粘贴操作

用户可能通过粘贴输入超出长度的内容，需要额外处理 paste 事件。

input.addEventListener('paste', function(e) {
  e.preventDefault();
  const pasteData = e.clipboardData.getData('text/plain');
  const newLength = this.value.length + pasteData.length;
  if (newLength <= maxLength) {
    this.value += pasteData;
  } else {
    const allowedLength = maxLength - this.value.length;
    this.value += pasteData.substring(0, allowedLength);
  }
});

兼容 textarea 的换行符

textarea 中的换行符在不同系统下可能占不同长度（Windows 为 \r\n，占 2 字符），需要统一处理。

textarea.addEventListener('input', function() {
  const normalizedValue = this.value.replace(/\r\n/g, '\n');
  if (normalizedValue.length > maxLength) {
    this.value = normalizedValue.substring(0, maxLength);
  }
});

以上方法可以根据实际需求组合使用，实现完善的 maxlength 功能。