type="number"不可靠因允许e/+/-、粘贴非法字符串、Safari不触发input事件且无法限制小数位；应改用input事件+正则实时清洗，如/^\d*\.?\d{0,2}$/，并配合后端校验与inputmode="decimal"优化体验。
金额输入框的 type="number" 为什么不可靠
直接用 type="number" 做金额校验会漏掉关键问题：它允许输入 e、+、-，还能粘贴非法字符串（比如 "12.34.56" 或 "¥100"），且在 Safari 中不触发 input 事件监听。更麻烦的是，它无法限制小数位数——用户输 123.456，浏览器照收，但后端可能直接拒收。
所以别依赖原生 type="number" 做金额校验，它只适合简单整数场景。
用 input 事件 + 正则实时过滤更可控
核心思路是：监听 input 事件，对当前值做格式清洗，再写回 value。重点不是“阻止输入”，而是“即时修正”。
- 匹配合法金额的正则建议用：
^\d*\.?\d{0,2}$（支持空、整数、一位或两位小数） - 注意要先去掉开头的
0（除单独一个0外），否则会出现0012.30 - 粘贴、拖拽、上下箭头等操作都会触发
input，所以这个方案覆盖全 - 别用
keydown—— 它捕获不到粘贴、IME 输入、语音输入等行为
示例逻辑（简写）：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
inputEl.addEventListener('input', (e) => {
let v = e.target.value.replace(/[^\d.]/g, ''); // 先干掉非数字和点
const match = v.match(/^\d*\.?\d{0,2}$/);
if (!match) {
v = v.slice(0, -1); // 删掉最后一个字符再试
}
// 处理多余前导零：'00'→'0'，'012'→'12'，'0.5'→'0.5'
if (v.startsWith('0') && v.length > 1 && v[1] !== '.') v = v.slice(1);
e.target.value = v;
});
后端校验不能省，前端只是体验层
前端过滤只是防误操作和提升体验，不是安全边界。真实风险点包括：
- 用户禁用 JS 后绕过所有前端逻辑
- 用 DevTools 直接改
value并提交 - 用 curl / Postman 发送
"amount": "999999999999.999"这种超长小数
所以后端必须做两件事：parseFloat() 后校验是否为有效数字、小数位 ≤ 2、数值在业务允许范围内（比如单笔 ≤ 100 万）。Node.js 可用 Number.isFinite()，Python 用 isinstance(val, (int, float)) and val == val（排除 NaN）。
移动端软键盘适配容易被忽略
在 iOS 和 Android 上，inputmode="decimal" 比 type="number" 更合适——它让键盘默认弹出带小数点的数字键盘，又不会引入 type="number" 的兼容性问题。
同时加 pattern="\d*\.?\d{0,2}" 可在部分安卓浏览器中唤起更精准的键盘（但不要依赖它做校验）。
别设 maxlength：金额位数不确定（比如 0.01 和 99999999.99 长度差很多），硬限制反而导致用户输不了大额。
