JSPM

native-currency-input

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q25723F
  • License GPL-3.0-or-later

Extends native input text element to accept currency in a minimally acceptable manner.

Package Exports

  • native-currency-input
  • native-currency-input/currencyInputConstructor.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 (native-currency-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

currencyInput

This extends native form input element so as to better handle currencies by presenting them in ISO standard and returning the input as an Atomic value, e.g. cent for Euro or Dollar, pence for Pounds Sterling.

See a working example here: https://codepen.io/tomasMetcalfe/full/mdjGRXo

A curreny input takes the following form (HTML):

<currency-input currency="EUR" contenteditable="true" name="current-value" value="00.00">00.00</currency-input>

Note the ISO code for the currency is passed through the currency attribute. In the above example it is set to EUR

On input, the value is written, in cent, to a data-attribute called incent.

The input can be retrieved by simply reading that data attribute:

const value = document.querySelector('currency-input').dataset.incent;

Note that the type of class constructor used here is only available in recent JavaScript flavours. To use this in production I would advise using Babel to ensure sufficient backward compatibility.