输入框达到maxlength最大长度限制时如何用新输入替换最早内容？

可以通过监听输入框的input事件动态裁剪输入内容实现需求，逻辑很简单：输入内容长度超过maxlength限制时，直接保留最后N位（N为maxlength设定值）即可。

完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    #username {
      width: 30px;
    }
  </style>
</head>
<body>
  <input type="text" id="username" name="username" maxlength="3">

  <script>
    const input = document.getElementById('username')
    const maxLen = input.maxLength // 直接读取元素自带的maxlength属性，不用硬编码
    input.addEventListener('input', () => {
      if (input.value.length > maxLen) {
        // 截取最后maxLen位的内容替换原内容
        input.value = input.value.slice(-maxLen)
      }
    })
  </script>
</body>
</html>

效果验证 #

• 依次输入a、b、c，输入框正常显示abc
• 继续输入d，输入框会自动更新为bcd，符合需求。

内容的提问来源于stack exchange，提问作者one-hand-octopus