# Currency input

> Shows a typed amount in the page's locale and currency once the field loses focus, and submits the plain number.

## Anatomy

Add `data-currency` to a [text field](/text-inputs.html.md) so the amount shows in the page's locale and currency once the field loses focus.

The attribute holds an ISO 4217 code, such as `EUR`, on an `<input>` of type `text`. `AutoInit()` starts every one. The locale comes from the nearest `lang`. While the field has focus it shows the plain number, such as `1234,5`, and when it loses focus it shows `1.234,50 €`. Add `inputmode="decimal"` so phones open a number pad with a decimal key, and name the currency in the label.

 Preis in Euro

 Price in US dollars

 価格（円）

```
<div class="field">
  <input id="price" name="price" type="text" inputmode="decimal" autocomplete="off"
         placeholder=" " data-currency="EUR">
  <label for="price">Price in euros</label>
</div>
```

## How typed amounts read

Typed and pasted text keeps its digits, `.`, `,` and a leading minus, and drops spaces, signs and letters. The last `.` or `,` is the decimal mark when it is followed by no more digits than the currency shows; every other separator groups. So `1234.5`, `1234,5`, `1.234,5` and `1,234.50` all read 1234.5, and `1.234` reads 1234 for euros. Yen has no fraction digits, so every separator groups. Full-width digits from an input method editor and the locale's own digits read as digits.

## The submitted value

The form submits the plain number, `1234.5`, rounded as the field shows it, so a submit and `new FormData(form)` read the same value, also when the form is submitted with Enter while the field has focus. The field keeps its `name`, and an empty field submits an empty string.

A saved value is formatted when the component starts, without an `input` or `change` event, and again after a form reset. It reads as a plain number first, so write saved amounts as `value="1234.5"`; `value="1.234"` is 1.234. A value a script sets shows formatted after the field next loses focus. A page's `change` and `blur` listeners read the formatted text, and the instance's `value` property gives the number. `min`, `max` and `step` do not apply to a text input. Do not combine `data-currency` with [`data-mask`](/input-mask.html.md).

## Text with no amount

Text with no digit stays as typed, and the field reports itself invalid with `Enter an amount.` until it holds an amount or is empty. A `.validate` field shows the message when it loses focus.

## Options and methods

`i18n.invalid` replaces the validity message, from script or from `data-currency-input-options`.

```
<input type="text" data-currency="EUR"
       data-currency-input-options='{"i18n":{"invalid":"Betrag eingeben."}}'>
```

```
const price = Expressive.CurrencyInput.getInstance(document.getElementById('price'));
price.value;     // 1234.5, or null when the field is empty or holds no digit
price.destroy(); // removes the listeners, clears the message, leaves the text
```