Input Text maxLength 属性

使用方法

maxLength 属性可以应用于 <input> 和 <textarea> 标签上。在 <input> 标签中，maxLength 属性用于限制文本输入框中可以输入的字符数，而在 <textarea> 标签中，maxLength 属性用于限制文本区域中可以输入的字符数。

<input type="text" maxLength="10">
<textarea maxLength="100"></textarea>

示例代码

下面是一个简单的示例，演示了如何使用 maxLength 属性来限制用户在输入框中输入的字符数：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Input Text maxLength 属性示例</title>
</head>
<body>
  <label for="username">用户名：</label>
  <input type="text" id="username" maxLength="10">
  <p>您还可以输入 <span id="remaining">10</span> 个字符</p>

  <script>
    const input = document.getElementById('username');
    const remaining = document.getElementById('remaining');

    input.addEventListener('input', function() {
      const maxLength = parseInt(input.maxLength);
      const remainingChars = maxLength - input.value.length;
      remaining.textContent = remainingChars;
    });
  </script>
</body>
</html>

在上面的示例中，用户在输入框中输入字符时，会动态显示剩余可输入字符数。当输入字符数超过限制的最大字符数时，用户将无法继续输入。

注意事项

• maxLength 属性的值应该是一个正整数，表示最大可输入字符数。
• 在某些浏览器中，maxLength 属性可能会受到输入法的影响，导致限制字符数不准确。
• 当用户尝试输入超过限制字符数时，可能会出现截断输入的情况，这需要在前端和后端进行相应处理。

希望通过本文的介绍，你能够更好地了解和应用 maxLength 属性来限制用户输入的字符数。祝你在 web 前端开发中取得更好的成就！