Masked Number input, similar to Masked Text input, but only accepting numeric input
Opaque type for storing local State
initialState : State
Initial state
input : Options msg -> List (Html.Attribute msg) -> State -> Maybe Basics.Int -> Html msg
Masked Number input element
Example:
type Msg = InputUpdated (Maybe Int) | StateUpdated MaskedInput.State | FocusUpdated Bool
MaskedInput.Number.input
{ pattern = "(###) ###-####"
, inputCharacter = '#'
, onInput = InputUpdated
, toMsg = StateUpdated
, hasFocus = Just FocusUpdated
}
[ class "masked-input"
...
]
model.currentState
model.currentValue
{ pattern : String
, inputCharacter : Char
, onInput : Maybe Basics.Int -> msg
, toMsg : State -> msg
, hasFocus : Maybe (Basics.Bool -> msg)
}
Options of the input component.
pattern
is the pattern used to format the input value. e.g.: (###) ###-####inputCharacter
: is the special character used to represent user input. Default value: #
toMsg
: is the Msg for updating internal State
of the element.onInput
is the Msg tagger for the onInput event.hasFocus
is an optional Msg tagger for onFocus/onBlur event.defaultOptions : (Maybe Basics.Int -> msg) -> (State -> msg) -> Options msg
Default value for Options
.
onInput
(type: Maybe Int -> msg
) : The onInput Msg taggertoMsg
(type: String -> msg
) : The Msg for updating internal State
of the element.Value:
{ pattern = ""
, inputCharacter = '#'
, onInput = onInput
, toMsg = toMsg
, hasFocus = Nothing
}