Vue3数字输入框Windows无法输入逗号的原因及解决方法

问题原因 #

• 操作系统区域设置差异：Windows系统默认部分地区的数字输入规则严格遵循HTML5 type="number"标准，仅允许点号（.）作为小数分隔符；而Linux/Mac系统的浏览器会适配系统区域设置，若系统用逗号作为小数分隔符，就允许输入逗号。
• 浏览器实现差异：不同系统下的浏览器对number类型输入框的校验逻辑不同，Windows端的Chrome、Edge等会限制非标准小数分隔符输入，而Linux/Mac端浏览器在区域设置匹配时会放行逗号。

解决办法 #

方法1：改用文本输入框+正则校验 #

放弃type="number"，用文本框配合正则限制输入，同时统一小数分隔符格式，保证v-model绑定正常：

<input
  v-model="item.lab_data[8]"
  title="Must contain a decimal number"
  type="text"
  class="form-control"
  required
  autofocus
  pattern="[0-9]+([.,][0-9]+)?"
  @input="handleDecimalInput(item, 8)"
/>

添加对应的输入处理函数：

const handleDecimalInput = (item, index) => {
  // 将逗号替换为点号，统一数值格式
  let inputValue = item.lab_data[index].replace(',', '.');
  // 校验是否为有效数字
  if (!isNaN(parseFloat(inputValue)) && isFinite(inputValue)) {
    item.lab_data[index] = inputValue;
  } else {
    // 无效输入时清空，也可保留之前的有效数值
    item.lab_data[index] = '';
  }
};

方法2：自定义Vue指令处理输入 #

创建全局指令，统一处理不同系统下的小数分隔符输入：

const app = createApp(App);

app.directive('decimal-input', {
  mounted(el, binding) {
    el.addEventListener('input', (e) => {
      let value = e.target.value;
      // 把所有逗号替换为点号
      value = value.replace(/,/g, '.');
      // 只保留数字和一个点号
      value = value.replace(/[^0-9.]/g, '');
      const decimalParts = value.split('.');
      if (decimalParts.length > 2) {
        value = decimalParts[0] + '.' + decimalParts.slice(1).join('');
      }
      e.target.value = value;
      // 更新v-model绑定的值
      binding.value = value;
    });
  }
});

使用该指令：

<input
  v-model="item.lab_data[8]"
  v-decimal-input
  title="Must contain a decimal number"
  type="text"
  class="form-control"
  required
  autofocus
/>

方法3：调整Windows系统区域设置（仅本地环境适用） #

如果是个人本地开发测试，可修改Windows区域设置：

1. 打开「控制面板」→「区域」→「其他设置」
2. 在「小数符号」下拉菜单选择逗号（,）
3. 重启浏览器后生效

此方法仅适用于个人环境，无法覆盖所有用户，不推荐作为通用方案。

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