HTML 金额输入框怎么自动格式化千分位与小数位数-H5教程-PHP中文网

金额输入框需用javascript监听input事件，清洗非数字字符、保留首位小数点，parsefloat转数值后tofixed固定小数位，tolocalestring添加千分位，并延迟恢复光标位置以保障交互体验。

html 金额输入框怎么自动格式化千分位与小数位数

金额输入框自动格式化千分位和小数位，核心是监听输入、清洗原始值、按规则格式化并同步到视图，同时保证光标位置合理、支持退格/删除/粘贴等操作。纯 HTML 无法实现，需配合 JavaScript（推荐用 input 事件 + 正则清洗 + 数字解析）。

基础实现：监听 input 并格式化

给 <input type="text"> 绑定 input 事件，每次输入后提取纯数字（含小数点），转为合法数字，再格式化为带千分位和固定小数位（如 2 位）的字符串。

用正则 /[^\d.]/g 去除非数字和小数点字符
允许多个小数点？只保留第一个，后续替换为空（.replace(/\.+/g, '.').replace(/\.([^.]*$)/, '.$1') 可优化）
用 parseFloat() 转数字，避免空字符串或纯小数点导致 NaN；若为 NaN，清空或设为 "0.00"
格式化用 Number.prototype.toFixed(2) 固定两位小数，再用 toLocaleString('en-US') 加千分位（注意：中文环境可传 'zh-CN'，但需确保浏览器支持）

保留光标位置，避免跳动

直接赋值 input.value 会重置光标到末尾，影响连续编辑。需在格式化前记录光标位置，格式化后按逻辑恢复：

读取 input.selectionStart 和 input.selectionEnd
格式化前后对比字符串长度变化，估算光标应偏移量（较复杂）
更稳妥做法：用 setTimeout(() => { input.setSelectionRange(...) }, 0) 延迟恢复，避开渲染队列
简单场景下可暂不处理光标（用户感知不强），优先保证数值正确性

兼容粘贴、剪切与特殊键

input 事件能捕获粘贴、删除、键盘输入，但需额外过滤无效粘贴内容（如带逗号、货币符号、字母）：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

粘贴时（paste 事件）可先 event.preventDefault()，读取 clipboardData.getData('text')，清洗后再插入
允许用户输入 "1234.5"，自动补零为 "1,234.50"；也接受 "1234.567"，四舍五入为 "1,234.57"
禁止负号（除非业务允许），可用正则提前剔除 - 或限制首位不能为 -
退格/删除键自然触发 input，无需额外监听 keydown

封装成可复用函数或自定义元素

避免每个输入框重复写逻辑，可封装为工具函数：

function formatCurrency(input, options = { decimals: 2 }) {
  const raw = input.value.replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1');
  const num = parseFloat(raw) || 0;
  const fixed = num.toFixed(options.decimals);
  input.value = Number(fixed).toLocaleString('en-US', {
    minimumFractionDigits: options.decimals,
    maximumFractionDigits: options.decimals
  });
}

调用：input.addEventListener('input', () => formatCurrency(input));

进阶可做成 <money-input></money-input> 自定义元素，内置格式化、验证、双向绑定能力。