minlength属性不触发实时提示，仅在提交时参与原生校验；实现实时提示需用JavaScript监听input事件，读取minLength值并动态更新提示文案和样式。
minlength 属性本身不触发实时提示
minlength 是 HTML5 表单验证属性，只在提交时（或调用 checkValidity()）参与原生校验，**不会监听输入、不触发事件、也不自动显示提示**。你看到的“提示”其实是浏览器默认表单验证失败时的气泡（比如 Chrome 提交时弹 “请至少输入 X 个字符”），和输入过程无关。
要实现实时提示，必须用 JavaScript 监听 input 或 keyup
核心思路：监听用户输入，读取当前值长度，对比 minlength 值，手动控制提示文案或样式。
- 推荐监听
input事件（覆盖粘贴、拖入、剪切板等所有输入方式） - 避免用
keyup—— 按住不放会重复触发，且无法捕获非键盘输入 - 从元素上读
element.minLength（注意是数字，不是字符串；若未设则为0） - 不要依赖
getAttribute('minlength')，它返回字符串，且未设置时返回null
const input = document.querySelector('input[minlength]');
const hint = document.querySelector('.hint');
<p>input.addEventListener('input', () => {
const { value, minLength } = input;
const remaining = Math.max(0, minLength - value.length);</p><p>if (remaining > 0) {
hint.textContent = <code>至少还需 ${remaining} 字</code>;
hint.classList.add('error');
} else {
hint.textContent = '符合要求';
hint.classList.remove('error');
}
});注意 maxlength/minlength 的兼容性与边界行为
虽然现代浏览器都支持 minlength，但它的行为有隐含细节：
-
minlength="0"或未声明时，input.minLength返回0，不是-1或undefined - 空格是否计入长度？—— 是，
' '算 1 个字符；如需忽略首尾空格，得用value.trim().length - 中文、emoji、代理对（如 ?）都按 UTF-16 code unit 计数，大多数情况就是你看到的“字数”，但某些 emoji 可能占 2 个 length 单位
- 移动端软键盘触发
input事件有时有延迟，建议加requestAnimationFrame防抖（仅当提示频繁闪烁时才需要）
别把 placeholder 当提示，也别用 title 属性凑合
placeholder 是占位文本，不反映实时状态；title 是 hover 提示，无法在输入中主动展示。两者都不能替代可控的实时反馈。
立即学习“前端免费学习笔记（深入）”；
真正可靠的提示载体是紧邻 input 的 <span class="hint"></span> 这类 DOM 元素——你可以控制它的显隐、颜色、过渡动画，甚至结合 :valid/:invalid 伪类做 CSS 响应，但前提是 JavaScript 已同步更新元素 validity 状态（例如调用 input.reportValidity() 仅用于提交校验，不影响实时 UI）。
最易被忽略的一点：如果用户清空输入后又快速输入达标内容，提示文案切换要平滑，避免闪动——检查是否在每次 input 中无条件重写 textContent，而不是只在状态变化时更新。
