maxlength限制输入字符数,value设置默认值,二者可共存于input标签;maxlength静默截断超长输入但不校验js赋值,value为真实初始值参与提交,需服务端二次校验。

用 maxlength 属性设最大长度,用 value 属性设默认值,两者可同时写在一个 <input> 标签里。
设置最大输入长度:用 maxlength
maxlength 按字符数限制用户能输入的内容,适用于 text、password、email、tel 等类型:
- 浏览器会自动拦截超出长度的新增输入(比如设
maxlength="10",第 11 个字符键入时被静默丢弃) - 它不校验已存在的超长值——通过 DevTools 修改或 JS 赋值(如
el.value = "12345678901")仍会保留,提交也不报错 - 若需表单提交前触发提示,得手动调用
setCustomValidity(),并在input事件中同步判断
设置默认显示内容:用 value
value 决定页面加载后输入框里预填的文字,用户可直接编辑或清空:
- 例如:
<input type="text" name="city" value="北京">,打开页面即显示“北京” - 它和
placeholder不同:placeholder 是灰色提示语,聚焦后消失;value 是真实初始值,参与表单提交 - 如果同时写了
value和placeholder,value 优先显示,placeholder 不出现
常见组合写法示例
把两个属性一起用,既控制长度又预设内容:
<input type="text" name="nickname" maxlength="12" value="游客"><input type="email" name="contact" maxlength="60" value="example@domain.com">- 搭配
size还能控制显示宽度:<input type="text" size="25" maxlength="30" value="请输入标题">
需要注意的细节
仅靠 HTML 属性不够稳妥,尤其在动态场景下:
- JS 动态赋值后,若可能超长,应主动截断:
el.value = el.value.slice(0, el.maxLength) - maxlength 不影响粘贴行为——用户粘贴超长文本时,浏览器通常允许,需监听
paste事件处理 - 服务端必须二次校验长度,前端限制可被绕过
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











