XGitHub

How It Works

A scannable reference for Numora's event handlers, sanitization steps, formatting stages, and value output. For the long-form narrative with diagrams and demos, see Anatomy of a Numeric Input.

Events

Numora intercepts four input vectors on a single <input type="text">. See Anatomy: event pipeline for the lifecycle and timing of each.

  • keydown - skips the cursor over thousand separators on Delete / Backspace.
  • beforeinput - primary formatting hook. Calls preventDefault() and writes the formatted result via setRangeText, preserving the browser's undo stack.
  • input - single onChange emitter; idempotent on values already produced by the pipeline.
  • paste - splices clipboard text into the selection range, runs the full pipeline, repositions the cursor.
  • focus / blur - strip / re-apply thousand separators in FormatOn.Blur mode only.

Sanitization

Seven steps run in order on every value before formatting is applied. See Anatomy: sanitization for the visual pipeline and per-step demos.

  1. Mobile keyboard artifact filtering
  2. Thousand separator removal
  3. Compact notation expansion (opt-in via enableCompactNotation)
  4. Scientific notation expansion
  5. Non-numeric character removal
  6. Extra decimal separator removal
  7. Leading zero normalization (disable with enableLeadingZeros)

Per-step configuration: see features/sanitization, features/compact-notation, features/scientific-notation, features/leading-zeros.

Formatting

Four stages run after sanitization. See Anatomy: formatting for diagrams and demos.

  1. Decimal trimming to decimalMaxLength
  2. Decimal padding to decimalMinLength
  3. Thousand grouping (FormatOn.Change only; deferred to blur in FormatOn.Blur)
  4. Cursor restoration after the formatted value replaces input.value

Per-stage configuration: see features/formatting, features/decimals.

Value output

Every value is emitted as a string. See Anatomy: raw vs formatted for the mental model; features/value-types for the configuration and the valueAsNumber escape hatch.

  • formatted - the display string with thousand separators; always written to input.value.
  • raw - the sanitized string without separators; emitted via onChange when rawValueMode: true.