abadi199/elm-input-extra/5.2.2

NOTE: the latest version is 5.2.6

MaskedInput.Text

Masked Text input

State

type State

Opaque type for storing local State

Initial state

View

input : Options msg -> List (Attribute msg) -> State -> String -> Html msg

Text input element

Example:

type Msg = InputUpdated String | StateUpdated MaskedInput.State | FocusUpdated Bool


MaskedInput.Text.input
    { pattern = "(###) ###-####"
    , inputCharacter = '#'
    , onInput = InputUpdated
    , toMsg = StateUpdated
    , hasFocus = Just FocusUpdated
    }
    [ class "masked-input"
    ...
    ]
    model.currentState
    model.currentValue
type alias Options msg =
{ pattern : String
, inputCharacter : Char
, onInput : String -> msg
, toMsg : State -> msg
, hasFocus : Maybe (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 : (String -> msg) -> (State -> msg) -> Options msg

Default value for Options.

  • onInput (type: String -> msg) : The onInput Msg tagger
  • toMsg (type: String -> msg) : The Msg for updating internal State of the element.

Value:

{ pattern = ""
, inputCharacter = '#'
, onInput = onInput
, toMsg = toMsg
, hasFocus = Nothing
}