javascript 44 lines · 8 steps

Live thousand separators without losing the caret

An input handler reformats numbers with locale separators while keeping the cursor anchored to the same digit.

Explained by highlit

Advanced dom intl caret-preservation input-formatting locale

1function attachThousandSeparators(input, { locale = 'en-US' } = {}) {
const formatter = new Intl.NumberFormat(locale);
const groupSep = formatter.format(11111).replace(/\d/g, '')[0] || ',';
const decimalSep = formatter.format(1.1).replace(/\d/g, '')[0] || '.';
5 
const countDigitsBeforeCaret = (value, caret) =>
  value.slice(0, caret).replace(/[^\d]/g, '').length;
8 
const caretForDigitCount = (value, digitsWanted) => {
  if (digitsWanted === 0) return 0;
  let seen = 0;
  for (let i = 0; i < value.length; i++) {
    if (/\d/.test(value[i])) {
      seen++;
      if (seen === digitsWanted) return i + 1;
    }
  }
  return value.length;
};
20 
const format = () => {
  const raw = input.value;
  const digitsBeforeCaret = countDigitsBeforeCaret(raw, input.selectionStart);
24 
  let [intPart, ...rest] = raw.split(decimalSep);
  const negative = /^-/.test(intPart);
  intPart = intPart.replace(/[^\d]/g, '');
28 
  let formatted = intPart
    ? formatter.format(BigInt(intPart))
    : '';
  if (negative && formatted) formatted = '-' + formatted;
  if (rest.length) formatted += decimalSep + rest.join('').replace(/[^\d]/g, '');
34 
  input.value = formatted;
  const caret = caretForDigitCount(formatted, digitsBeforeCaret);
  input.setSelectionRange(caret, caret);
};
39 
input.addEventListener('input', format);
format();
42 
return () => input.removeEventListener('input', format);
44}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Counting digits before the caret is a locale-agnostic anchor that survives reformatting when raw character positions don't.
2Intl.NumberFormat can be probed with sample values to discover the actual group and decimal separators for any locale.
3Returning a cleanup function makes an attach-style helper self-contained and easy to tear down.

Related explainers

javascript

const ROLE_PERMISSIONS = {
  admin: ['users:read', 'users:write', 'billing:read', 'billing:write'],
  manager: ['users:read', 'billing:read'],
  member: ['users:read'],

Role-based permissions middleware in Express

authorization middleware rbac

Intermediate 9 steps

javascript

import { useReducer, useEffect } from "react";
 
const initialState = { status: "idle", data: null, error: null };

Building a data-fetching hook in React

custom-hooks usereducer data-fetching

Intermediate 9 steps

javascript

const express = require('express');
const app = express();
 
app.get('/health', (req, res) => res.json({ status: 'ok' }));

Graceful shutdown in an Express server

graceful-shutdown signal-handling connection-tracking

Advanced 9 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
function getColumnCount(width) {
  if (width < 640) return 1;

A responsive column hook in React

custom-hooks debouncing responsive-design

Intermediate 7 steps

javascript

function initCharacterCounter(textarea, options = {}) {
  const maxLength = options.maxLength ?? 280;
  const warnThreshold = options.warnThreshold ?? 0.9;

A live character counter for textareas

dom closures accessibility

Intermediate 7 steps

javascript

function autoResizeTextarea(textarea, { maxHeight = Infinity } = {}) {
  const resize = () => {
    textarea.style.height = 'auto';
    const contentHeight = textarea.scrollHeight;