千分位输入掩码：实现光标位置同步移动

Hey George, nice work getting the core thousand-separator functionality up and running! That cursor misalignment issue is super common when formatting input on the fly—let’s walk through how to fix it, since you’re building a proof of concept for Ionic later.

The Root of the Problem #

When you inject commas into the input value, the total length of the text changes, but the cursor’s position is still tied to the original unformatted string’s index. For example, if you type 1234 and it becomes 1,234, a cursor that was at position 3 (after the 3) in the raw string needs to shift to position 4 in the formatted string to stay in the same relative spot next to the 3.

Step-by-Step Solution #

Since you mentioned your implementation uses two inputs (I assume one for raw unformatted numbers, one for the displayed formatted version), here’s how to sync the cursor correctly:

1. Track relative cursor position before formatting
   Instead of relying on absolute indices, track how many digits are before the cursor in the raw input. This way, you can map that count to the correct position in the formatted string, regardless of added commas.

2. Calculate and set the new cursor position
   After generating the formatted value, iterate through it to find where the same number of digits fall, adjusting for the commas added along the way.

Here’s a concrete code example to implement this logic:

// Helper function to add thousand separators (strips existing commas first)
function formatWithSeparators(rawValue) {
  const cleanValue = rawValue.replace(/,/g, '');
  return cleanValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// Handle input changes and cursor synchronization
function handleInputUpdate(e) {
  const inputElement = e.target;
  const rawValue = inputElement.value.replace(/,/g, '');
  const formattedValue = formatWithSeparators(rawValue);
  const originalCursorPos = inputElement.selectionStart;

  // Count how many digits are before the cursor in the raw, unformatted string
  const digitsBeforeCursor = rawValue.slice(0, originalCursorPos).replace(/\D/g, '').length;

  // Calculate the new cursor position in the formatted string
  let newCursorPos = 0;
  let digitCounter = 0;
  for (let i = 0; i < formattedValue.length; i++) {
    if (!isNaN(formattedValue[i])) {
      digitCounter++;
      // Stop when we've matched the number of digits before the original cursor
      if (digitCounter === digitsBeforeCursor) {
        newCursorPos = i + 1;
        break;
      }
    }
    // Increment position for non-digit characters (commas)
    newCursorPos++;
  }

  // Update the input value and lock the cursor to the correct spot
  inputElement.value = formattedValue;
  inputElement.setSelectionRange(newCursorPos, newCursorPos);
}

Notes for Ionic Migration #

When you move this logic to Ionic’s ion-input, the core approach stays identical:

• Listen to the ionInput event instead of the standard input event.
• Use Angular’s @ViewChild to grab a reference to the underlying native input element, then call setSelectionRange() on it just like in the example.
• Add a quick check to avoid infinite update loops: only update the input value if the formatted version differs from the current input value.

Bonus: Smooth Deletion Handling #

To make the experience feel natural when deleting characters, add a check for backspace/delete events. If the user deletes a comma, automatically shift the cursor left by one to stay on the adjacent digit instead of leaving it in the empty space where the comma was.

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