HTML原生<input type="number">无法可靠实现千分位+两位小数格式化，必须用type="text"+JavaScript控制；核心是oninput实时清洗非法字符、限制小数位、阻止多余符号，onblur时用Intl.NumberFormat补零加逗号。
直接说结论：HTML 原生 <input type="number"> 无法可靠实现「输入时自动千分位+两位小数」，必须用 type="text" + JavaScript 控制，否则会出现光标跳位、粘贴失效、负号错位、移动端兼容崩坏等问题。
为什么不能用 type="number" 做金额格式化
浏览器对 type="number" 的解析逻辑和用户预期严重错位：
- 输入
1234.5后 JS 改成1,234.50，浏览器会认为非法值，自动清空或截断为1234.5 - 移动端软键盘不触发小数点按钮（iOS Safari 尤其明显），
step="0.01"形同虚设 -
oninput中修改value会导致光标强制跳到末尾，无法在中间编辑 - 复制粘贴带逗号的字符串（如
"1,234.50"）会被直接拒绝，value变为空
oninput + 正则清洗是最稳的实时拦截方案
核心思路是：不等用户输完，就在每次按键后立刻清理非法字符、控制小数位、阻止多余小数点——不是“格式化显示”，而是“只允许合法输入”。
关键代码片段（可直接用）：
立即学习“前端免费学习笔记（深入）”；
function cleanMoneyInput(value) {
// 先干掉所有非数字、非小数点、非负号
value = value.replace(/[^\d.-]/g, '');
// 负号只能在开头，且最多一个
value = value.replace(/^-+/, '-').replace(/^-.*?-/g, '-');
// 小数点最多一个，且不能在开头（除非是 "-."）
const dotIndex = value.indexOf('.');
if (dotIndex > 0) {
value = value.slice(0, dotIndex + 1) + value.slice(dotIndex + 1).replace(/\./g, '');
}
// 小数点后最多两位
if (dotIndex >= 0 && value.length > dotIndex + 3) {
value = value.slice(0, dotIndex + 3);
}
// 首位是 0 且后面不是小数点 → 去掉（防止 012 → 12）
if (value.length > 1 && value[0] === '0' && value[1] !== '.') {
value = value.slice(1);
}
return value;
}
绑定到 input：
<input type="text" id="money" oninput="this.value = cleanMoneyInput(this.value)">
注意：oninput 比 onkeyup 更可靠（覆盖粘贴、拖拽、语音输入等场景）。
onblur 时补零、加逗号、防空值
输入结束才做“美化”，此时用户不再编辑，可安全操作：
- 空值 → 设为
"0.00" - 无小数点 → 补
".00" - 只有一位小数 → 补
"0" - 整数部分每三位加逗号（用
Intl.NumberFormat最稳妥）
示例：
function formatOnBlur(el) {
let v = el.value.trim();
if (!v || v === '-' || v === '.') {
el.value = '0.00';
return;
}
// 先转成数字再转回字符串，清除前导零和非法格式
const num = parseFloat(v);
if (isNaN(num)) {
el.value = '0.00';
return;
}
// 使用原生 API 格式化（兼容 IE11+，无需正则手写）
const formatter = new Intl.NumberFormat('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
el.value = formatter.format(num);
}
HTML 中调用：<input onblur="formatOnBlur(this)">
焦点进出时保留原始数值供计算用
格式化后的字符串（如 "1,234.50"）不能直接参与运算。必须存一份干净的数值：
- 获取焦点（
onfocus）：把当前显示值去逗号、去货币符号，还原成"1234.50"写回 input - 失去焦点（
onblur）：把处理后的"1,234.50"显示出来，同时把原始数值存在data-raw或组件 data 中
例如小程序中常见做法：
this.setData({
moneyValue: '1,234.50', // 用于显示
moneyValue2: 1234.50 // 用于计算/提交
})
这个分离动作极易被忽略——很多 bug 都源于提交时用了带逗号的字符串去发请求，后端解析失败。
