iOS Safari中获取系统地区设置的方法及React货币输入组件适配问题咨询

Great question—this is a tricky edge case when language and regional settings don’t align, and it’s super common on mobile web. Let’s break down your options to fix this:

1. Detect the System’s Actual Regional Format (Instead of Just Language) #

The window.navigator.language only returns your device’s language setting (es-ES in your case), but there are better ways to get the regional formatting preferences iOS uses for numbers:

Option A: Use Intl.NumberFormat to Get the Resolved Locale #

The Intl.NumberFormat().resolvedOptions().locale method returns the actual locale the browser uses for formatting, which respects your device’s regional settings (Taiwan, in this scenario). You can use this to dynamically set your currency input’s decimal separator:

// Get the system's effective locale for number formatting
const effectiveLocale = Intl.NumberFormat().resolvedOptions().locale;

// Map the locale to the correct decimal separator
const decimalSeparator = effectiveLocale.includes('TW') ? '.' : ',';

// Pass this to your React Currency Input component
<CurrencyInput
  decimalSeparator={decimalSeparator}
  // Other props like currency symbol, prefix, etc.
/>

Option B: Directly Detect the Decimal Separator #

If you don’t need the full locale string, you can test how the browser formats a decimal number to extract the separator directly—this is foolproof because it reflects exactly how the system expects numbers to be formatted:

const getDecimalSeparator = () => {
  // Format a number with a decimal and pull out the separator character
  const formattedNumber = (1.1).toLocaleString();
  return formattedNumber.charAt(formattedNumber.length - 2);
};

// Use the detected separator in your component
<CurrencyInput
  decimalSeparator={getDecimalSeparator()}
/>

2. Add a Manual Regional Preference as a Fallback #

If automatic detection fails (rare, but possible with older iOS versions or niche browser configurations), adding a manual setting is a user-centric safety net:

• Add a small settings panel in your app where users can choose their preferred decimal separator (comma or period) or select a full locale (e.g., "Spanish (Spain)" vs "Chinese (Taiwan)").
• Store this preference in localStorage so it persists across sessions.
• Initialize your currency input with the saved preference first, falling back to automatic detection if no preference is set.

This gives users control when their system’s mixed settings cause friction, and it’s a lightweight feature that boosts UX for edge cases like yours.

Final Recommendation #

Start with the automatic detection using Intl.NumberFormat or the direct separator check—this should handle most cases where language and region don’t align. If you still get user reports of issues, roll out the manual preference setting as a reliable fallback.

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