HTML input 的 pattern 属性无法可靠校验多位小数，因其仅在提交时触发、不处理粘贴和实时输入；应使用 JavaScript 监听 input 和 paste 事件，通过正则 /^(-?\d*.?\d{0,6})/ 安全截取合法前缀并修正 value，确保输入框内始终显示最多6位小数的合法字符串。
HTML input 的 pattern 属性不支持完整正则校验逻辑
直接在 <input type="text"> 里用 pattern 校验「多位小数」（比如允许 123.456789）是不可靠的——pattern 只在表单提交时触发，且不校验实时输入、不处理粘贴、不拦截非法字符，更无法限制小数位数精度。浏览器对 pattern 的实现也存在差异，比如 Chrome 会忽略空值或只读状态下的验证。
用 JavaScript 监听 input 事件做实时过滤更可控
核心思路：监听 input 事件，在用户每次输入（包括粘贴、拖拽、键盘输入）后，用正则匹配并修正 value。关键不是“阻止输入”，而是“立即修正为合法格式”。
常见错误现象：
– 允许输入 123..45 或 -.12；
– 小数点后超过 6 位仍能输入；
– 粘贴 abc123.456def 后整个值被清空或保留非法部分。
实操建议：
- 用正则
/^-?\d*\.?\d{0,6}$/匹配合法字符串（支持负号、整数部分可空、小数点可选、小数位最多 6 位） - 但该正则不能直接用于
value = value.replace(...)，否则会破坏光标位置或删掉有效内容 - 推荐先提取数字部分：用
value.match(/^(-?\d*\.?\d{0,6})/)?.[1] || ''安全截取前缀 - 对粘贴场景单独监听
paste事件，event.clipboardData.getData('text')取原始文本再过滤
为什么不用 type="number" + step 和 max/min？
type="number" 看似简单，但它有硬伤：
– 不支持自定义小数位数限制（step="0.000001" 仅控制增减步长，不限制输入长度）；
– 在 Safari 和部分安卓 WebView 中，inputmode="decimal" 不生效，软键盘仍弹出英文键盘；
– 用户仍可粘贴任意字符串（如 123.456789abc），且不会自动清理；
– valueAsNumber 对非法值返回 NaN，但 value 字符串本身未变，容易误导后续逻辑。
所以，如果业务要求「输入框内始终显示合法的最多 N 位小数」，必须用 JS 控制 value 字符串本身，而不是依赖浏览器原生 number 类型。
一个轻量可靠的实现片段
以下代码可直接嵌入页面，适用于需要「最多 6 位小数」的场景：
<input type="text" id="decimalInput"><script>
const input = document.getElementById('decimalInput');
const decimalRegex = /^-?\d*\.?\d{0,6}$/;
input.addEventListener('input', () => {
let v = input.value;
// 先尝试提取合法前缀（含负号、小数点、最多6位小数）
const match = v.match(/^(-?\d*\.?\d{0,6})/);
if (match) {
input.value = match[1];
} else {
input.value = '';
}
});
// 处理粘贴
input.addEventListener('paste', (e) => {
e.preventDefault();
const text = e.clipboardData.getData('text');
const match = text.match(/^(-?\d*\.?\d{0,6})/);
input.value = match ? match[1] : '';
});
</script>
注意：这个方案没做「整数部分位数限制」，如果还需限制总长度（如最多 12 位数字），正则要相应调整，比如 /^-?\d{0,6}\.?\d{0,6}$/，并注意小数点前后总位数逻辑不能简单相加（因为小数点可选）。
最易被忽略的一点：光标位置没重置——用户在中间修改时，修正 value 会导致光标跳到末尾。真正在生产环境用，得结合 selectionStart/selectionEnd 做光标保持，那部分逻辑就不再轻量了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
