henriquecbuss/elm-mask

Mask Strings to be used in input fields. Apply and remove masks so it's easy to use in your update and view functions!

See an example in action on Ellie.

See more end-to-end example code in the examples/ folder.

Overview

Html.form []
    [ Html.input
        [ model.phoneNumber
            -- You can also apply the mask on your `update` function
            |> Mask.string { mask = "(##) #####-####", replace = '#' }
            |> Html.Attributes.value
        , Html.Events.onInput EnteredPhoneNumber
        ]
        []
    , Html.input
        [ model.price
            |> Mask.float (Mask.Precisely 2)
                { decimalSeparator = ",", thousandsSeparator = "." }
            |> Html.Attributes.value
        , Html.Events.onInput EnteredExampleFloatInput
        ]
        []
    ]

Usage

Just apply a mask on your input's value, and remove the mask before storing the value on your backend!

Learning Resources

Feel free to ask for help on the Elm Slack, in a channel or DMing me @Henrique Buss, any feedback is also welcome! And if you find any bugs, feel free to submit an issue!