placeholder仅是纯展示性占位文字，不具输入控制能力；实现格式约束需组合inputmode、pattern、title等原生属性，或用javascript mask库处理实时格式化，且后端必须校验。
HTML input 里 placeholder 不是格式提示，别当 mask 用
placeholder 只是占位文字，用户一输入就消失，它不阻止非法输入、不自动补字符、也不校验格式。想实现手机号、身份证、日期这类格式约束，得靠其他手段。
常见错误现象：placeholder="138-XXXX-XXXX" 看起来像提示，但用户照样能输 abc123，且提交时毫无拦截。
- placeholder 是纯展示，无任何输入控制能力
- 它不触发
input或change事件，无法用于实时校验 - 屏幕阅读器会读出 placeholder，但不会说明“这是格式要求”
用 inputmode + pattern + title 做轻量级格式引导
原生 HTML 能做的有限，但组合几个属性可以提升体验：让键盘更合适、浏览器提示更明确、表单提交前简单校验。
适用场景：表单提交前校验（非实时）、移动端键盘优化、对用户有基本格式提醒但不强控。
立即学习“前端免费学习笔记（深入）”；
-
inputmode="numeric"触发数字键盘，适合金额、电话等 -
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"配合title="请按 XXX-XXXX-XXXX 格式输入"，提交时浏览器弹原生提示 - 注意：
pattern只在type="text"或type="tel"下生效；type="number"会忽略pattern - 兼容性没问题，但 iOS Safari 的
title提示有时不显示，别依赖它做唯一提示
真正实现输入即格式化，得靠 JavaScript mask 库或自写逻辑
要边输边加横线、自动跳格、禁止非法字符（比如身份证不能输字母），必须用 JS 控制 input 事件。原生 HTML 做不到。
容易踩的坑：
- 直接监听
input并修改value，会导致光标跳到末尾 —— 必须手动保存/恢复光标位置 - 用
onkeydown拦截按键，但无法处理粘贴（paste事件需单独处理） - 第三方库如
imask或vanilla-text-mask更稳，但要注意它们对 React/Vue 的集成方式不同 - 示例片段（简化版手机号格式化）：
input.addEventListener('input', e => { let v = e.target.value.replace(/\D/g, ''); if (v.length > 11) v = v.substring(0, 11); v = v.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); e.target.value = v; });
后端永远要校验，前端 mask 只是体验优化
无论 JS mask 多严密，用户禁用 JS、绕过前端、用 curl 提交，都能发任意数据过来。mask 和 pattern 都只是降低误操作概率，不是安全边界。
性能影响很小，但要注意：
- 高频
input事件中避免复杂正则或 DOM 查询 - 移动端频繁触发输入事件，建议加
requestAnimationFrame节流（尤其带光标定位逻辑时） - 如果项目已用框架（如 Vue 的
v-model），别直接操作value，优先用修饰符或自定义指令
最常被忽略的是粘贴场景 —— 用户 Ctrl+V 一个乱码手机号，mask 逻辑没处理 paste，结果界面显示异常，但用户没察觉。这个点，十个项目九个漏。
