Chrome下input[type=number]运行时本地化切换失效问题求助

嘿，这个问题我之前也碰到过，来给你梳理下解决方案和背后的原因：

首先明确：这既不是Firefox“过度实现”，也不是Chrome“缺失功能”，而是不同浏览器对HTML规范的执行时机差异。

HTML规范提到lang属性会影响表单控件的区域化表现（比如数字输入的小数点分隔符），但规范并没有强制要求浏览器在运行时动态监听lang属性的变化。Firefox选择实现了动态监听，会在lang改变后立即更新输入控件的区域化行为；而Chrome目前仅在控件初始化阶段读取lang值，运行时修改不会触发重新适配。所以这是浏览器实现策略的不同，而非谁的功能有问题。

既然不能用外部库，除了换成input[type=text]手动处理验证，还有两个更贴合需求的思路：

动态重建输入控件 #

当切换语言时，不修改现有输入框的lang属性，而是直接创建一个带有新lang的新输入框，替换掉原来的。这样Chrome会在初始化新控件时读取正确的lang，自动适配小数点分隔符。示例代码：

function switchLang(targetLang) {
  const originalInput = document.getElementById('x');
  // 保存原控件的关键属性和值
  const currentValue = originalInput.value;
  const step = originalInput.step;
  
  // 创建新的数字输入框
  const newInput = document.createElement('input');
  newInput.type = 'number';
  newInput.id = 'x';
  newInput.step = step;
  newInput.lang = targetLang;
  
  // 转换值的格式：德语用逗号，英语用点
  newInput.value = targetLang === 'en' 
    ? currentValue.replace(',', '.') 
    : currentValue.replace('.', ',');
  
  // 替换原控件
  originalInput.parentNode.replaceChild(newInput, originalInput);
}

然后把链接的点击事件改成：

<a href="#" onclick="switchLang('en'); return false;">[en]</a>
<a href="#" onclick="switchLang('de'); return false;">[de]</a>

手动处理格式转换（保留number输入类型） #

保留input[type=number]，但在语言切换时手动转换输入值的格式，同时利用Intl.NumberFormat做标准化处理，还能保留数字输入的原生特性（比如移动端数字键盘）。示例代码：

function switchLang(targetLang) {
  const input = document.getElementById('x');
  input.lang = targetLang;
  
  // 先把当前值转成数字，再按目标语言格式化
  const rawNumber = parseFloat(input.value.replace(',', '.')); // 统一转成数字
  const formatter = new Intl.NumberFormat(targetLang, {
    minimumFractionDigits: 1,
    maximumFractionDigits: 1
  });
  input.value = formatter.format(rawNumber);
  
  // 监听输入事件，确保输入符合当前语言的格式
  input.oninput = function(e) {
    const allowedSeparator = targetLang === 'de' ? ',' : '.';
    // 清理输入：只保留数字和允许的分隔符，移除其他字符
    const cleanedValue = e.target.value
      .replace(/[^0-9.,]/g, '')
      .replace(targetLang === 'de' ? /\./g : /,/g, '');
    e.target.value = cleanedValue;
  };
}

虽然你项目里不能用外部库，但还是可以说：jQuery本身并没有内置解决这个Chrome兼容性问题的能力——它修改lang属性的逻辑和原生JS完全一致，Chrome依然不会自动更新控件行为。不过jQuery可以简化动态重建控件的代码，比如：

function switchLang(targetLang) {
  const $original = $('#x');
  const currentValue = $original.val();
  const step = $original.attr('step');
  
  const $newInput = $('<input>', {
    type: 'number',
    id: 'x',
    step: step,
    lang: targetLang,
    value: targetLang === 'en' 
      ? currentValue.replace(',', '.') 
      : currentValue.replace('.', ',')
  });
  
  $original.replaceWith($newInput);
}

但核心逻辑还是和原生方案一样，只是代码更简洁。

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