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.