技术需求：优化数字输入框实现千分位分隔与两位小数格式

Got it, let's tackle this problem. You want a number input that shows thousand separators and keeps exactly two decimal places—here's a polished solution that handles both display and editing smoothly, without relying on external libraries:

<input 
  type="text" 
  id="myInput" 
  value="3,512.12" 
  onfocus="focusFunction()" 
  onblur="blurFunction()" 
  oninput="inputHandler()"
  style="text-align: right; padding: 4px 8px; width: 180px;"
/>

<script>
const input = document.getElementById('myInput');

// 聚焦时：转换为纯数字格式，方便编辑
function focusFunction() {
  // 移除所有千分位逗号，得到原始数字字符串
  const rawValue = input.value.replace(/,/g, '');
  // 转成数字后强制保留两位小数，避免科学计数法或缺失小数位
  input.value = parseFloat(rawValue).toFixed(2);
}

// 失焦时：添加千分位分隔符，格式化显示
function blurFunction() {
  const rawValue = input.value.replace(/,/g, '');
  // 校验输入是否为有效数字
  if (!isNaN(rawValue) && rawValue.trim() !== '') {
    // 用原生Intl API实现标准化的千分位格式化，强制两位小数
    input.value = new Intl.NumberFormat('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(parseFloat(rawValue));
  }
}

// 实时输入限制：确保只能输入合法的两位小数数字
function inputHandler() {
  input.value = input.value
    .replace(/[^0-9.]/g, '') // 移除所有非数字、非小数点的字符
    .replace(/(\..*)\./g, '$1') // 只保留第一个小数点
    .replace(/(\.\d{2})\d+/g, '$1'); // 小数点后最多保留两位
}

// 页面加载完成后，初始化格式化显示
window.addEventListener('load', blurFunction);
</script>

关键细节解释： #

• 切换input类型为text：原生number类型输入框无法直接显示千分位分隔符，改用text配合JS控制，既保留编辑灵活性，又能实现格式化显示。
• 聚焦/失焦状态切换：
  • 当用户点击输入框（聚焦）时，自动移除千分位逗号，转成纯数字格式（比如3,512.12→3512.12），方便正常输入编辑。
  • 当用户离开输入框（失焦）时，用Intl.NumberFormat这个原生API格式化数字，它会自动处理千分位，并且强制保留两位小数，兼容性好且代码简洁。
• 实时输入校验：inputHandler函数会实时过滤非法输入，防止用户输入字母、符号、多个小数点，或者超过两位的小数，确保输入始终是合法的数字格式。
• 初始化格式化：页面加载时自动执行一次失焦格式化，让初始值3512.12直接显示为带千分位的3,512.12。

额外自定义选项： #

• 如果需要适配不同地区的数字格式（比如欧洲的点分隔千分位、逗号分隔小数），只需把Intl.NumberFormat的第一个参数改成对应地区码，比如'de-DE'（德语区）。
• 可以根据需求调整输入框的样式（宽度、padding、字体等），让显示更贴合你的页面设计。

内容的提问来源于stack exchange，提问作者user7737230