如何获取number类型input控件显示的十进制分隔符？

Absolutely! You can absolutely grab the decimal separator Chrome uses to display values in your type="number" input, and use it to make your span match the input's display perfectly. Since Chrome's localized number rendering (which can't be turned off with HTML attributes) ties to the browser or system's locale settings, here are two solid approaches to get that separator:

1. Use a temporary hidden number input (most accurate) #

This method directly mimics the behavior of your actual number input, so it's guaranteed to return the exact separator Chrome is using for display. Here's how:

function getInputDecimalSeparator() {
  // Create a hidden temp input that matches your input's step behavior
  const tempInput = document.createElement('input');
  tempInput.type = 'number';
  tempInput.step = '0.1'; // Ensures it triggers decimal display
  tempInput.valueAsNumber = 0.1; // Set a value that will show a decimal

  // Extract the separator by stripping digits from the displayed value
  const displayValue = tempInput.value;
  return displayValue.replace(/[0-9]/g, '')[0];
}

Just call this function once (on page load, for example) to get the separator, then reuse it whenever you need to format your value for the span.

2. Use Intl.NumberFormat (cleaner, locale-aware) #

Since Chrome's number input uses the browser's locale for formatting, you can leverage the built-in Intl API to fetch the separator directly. This is more concise:

function getLocaleDecimalSeparator() {
  const formatter = new Intl.NumberFormat();
  // Break down the formatted number into parts
  const parts = formatter.formatToParts(0.1);
  // Find the "decimal" part and return its value
  return parts.find(part => part.type === 'decimal').value;
}

This works because Intl.NumberFormat uses the same locale settings as Chrome's number input in most cases.

Sync your span with the input's display #

Once you have the separator, you need to format the input's value to match exactly what's shown in the input. A key detail here: the input's value property returns a standard dot-separated string, but the displayed value uses the localized separator. To fix this, use the valueAsNumber property to get the raw number, then format it to match the input's display (including respecting the step attribute's decimal places):

const numberInput = document.getElementById('your-number-input');
const displaySpan = document.getElementById('your-span');

// Get the separator once on page load
const decimalSeparator = getInputDecimalSeparator(); // Or use the Intl version

numberInput.addEventListener('input', () => {
  const numericValue = numberInput.valueAsNumber;
  
  if (isNaN(numericValue)) {
    // Handle invalid input (empty or non-numeric)
    displaySpan.textContent = '';
    return;
  }

  // Calculate how many decimal places to show based on the step attribute
  const stepParts = numberInput.step.split('.');
  const decimalPlaces = stepParts.length > 1 ? stepParts[1].length : 0;

  // Format the number to match the input's display
  let formattedValue = numericValue.toFixed(decimalPlaces);
  // Replace the standard dot with the localized separator
  formattedValue = formattedValue.replace('.', decimalSeparator);

  displaySpan.textContent = formattedValue;
});

Alternatively, using Intl.NumberFormat to handle formatting automatically (which also respects decimal places from step):

numberInput.addEventListener('input', () => {
  const numericValue = numberInput.valueAsNumber;
  
  if (isNaN(numericValue)) {
    displaySpan.textContent = '';
    return;
  }

  const stepParts = numberInput.step.split('.');
  const decimalPlaces = stepParts.length > 1 ? stepParts[1].length : 0;

  const formatter = new Intl.NumberFormat(undefined, {
    minimumFractionDigits: decimalPlaces,
    maximumFractionDigits: decimalPlaces
  });

  displaySpan.textContent = formatter.format(numericValue);
});

Either way, your span will now show exactly the same formatted value as the number input, right down to the decimal separator.

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