JSPM – @algrith/safari-numfix@1.0.2

Package Exports

@algrith/safari-numfix
@algrith/safari-numfix/dist/index.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@algrith/safari-numfix) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Algrith Safari Number Fix (safari-numfix)

🧩 A lightweight utility to safely handle paste and keydown events on number input fields in Safari.

Safari has a sanitization deficiency in <input type="number"> fields compared to modern browsers. It allows non-numeric characters and multiple decimal points, leading to unexpected or invalid values. This package provides a browser-aware workaround that intercepts paste & keydown events, corrects invalid numeric formats, and updates the input value correctly.

🚀 Features

✅ Ignores paste actions that include non-numeric characters
✅ Fixes Safari-specific paste behavior for number inputs
✅ Works with React, Vue, Angular, or plain JavaScript
✅ Maintains accurate caret position on insert
✅ Ensures only one decimal point is allowed
✅ Restricts non-numeric entries on keydown
✅ TypeScript support

📦 Installation

npm install @algrith/safari-numfix
# or
yarn add @algrith/safari-numfix

🔧 Usage

ReactJs

import { keyDownEventHandler, pasteEventHandler } from '@algrith/safari-numfix';

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  console.log(event.target.value);
};

<input
  onPaste={(e) => pasteEventHandler(e, handleChange)}
  onKeyDown={keyDownEventHandler}
  onChange={handleChange}
  type="number"
/>

VueJs

<script setup>
import { keyDownEventHandler, pasteEventHandler } from '@algrith/safari-numfix';

const handleChange = (e) => {
  console.log(e.target.value);
};
</script>

<template>
  <input
    @paste="(e) => pasteEventHandler(e, handleChange)"
    @keydown="keyDownEventHandler"
    @input="handleChange"
    type="number"
  />
</template>

Angular

import { keyDownEventHandler, pasteEventHandler } from '@algrith/safari-numfix';

onKeyDown(event: KeyboardEvent) {
  keyDownEventHandler(event);
};

onPaste(event: ClipboardEvent) {
  pasteEventHandler(event, this.onChange.bind(this));
}

VanillaJs

<input id="numInput" type="number" />

<script type="module">
  import { keyDownEventHandler, pasteEventHandler } from 'https://cdn.skypack.dev/@algrith/safari-numfix';

  const input = document.getElementById('numInput');

  input.addEventListener('keydown', keyDownEventHandler);

  input.addEventListener('paste', (e) => {
    pasteEventHandler(e, (event) => {
      console.log('Updated value:', event.target.value);
    });
  });
</script>

TypeScript Support

Types files can be found at https://github.com/algrith/safari-numfix/tree/main/src/types.ts.

Contributing

Missing something or found a bug? Report here.