Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import Html exposing (..)
- import Html.Events exposing (onClick, onInput)
- import Html.Attributes exposing (id, type_, value, disabled, style)
- main =
- beginnerProgram { model = initModel, view = view, update = update }
- {-- Model --}
- type alias Model =
- { savedValue: String
- , currentValue: String
- , isEditing: Bool
- }
- initModel : Model
- initModel =
- let str = "click to edit"
- in
- { savedValue = str
- , currentValue = str
- , isEditing = False
- }
- {-- Message--}
- type Msg =
- StartEdit
- | UpdateCurrentValue String
- | SaveChanges
- {-- Update --}
- update : Msg -> Model -> Model
- update msg model =
- case msg of
- StartEdit -> startEdit model
- SaveChanges -> saveChanges model
- UpdateCurrentValue val -> updateCurrentValue model val
- startEdit : Model -> Model
- startEdit model = { model | isEditing = True }
- updateCurrentValue : Model -> String -> Model
- updateCurrentValue model val = { model | currentValue = val }
- saveChanges : Model -> Model
- saveChanges model =
- { model
- | isEditing = False
- , savedValue = model.currentValue
- }
- {-- View --}
- view : Model -> Html Msg
- view model =
- div [ style [ ( "padding", "15px" ) ] ]
- [ if model.isEditing
- then div [] (enabledInput model)
- else div [] (disabledInput model)
- , h1 [] [ text "onClick with disabled attribute" ]
- , p [] [ text txtOnClick ]
- , h3 [] [ text "Debug info" ]
- , pre [] [ text <| "Model " ++ (toString model) ]
- ]
- txtOnClick =
- "Input with disabled attribute doesn't trigger onClick. " ++
- "Try change 'disabled True' to 'disabled False' (:line 76:) " ++
- "and onClick works. Is there workaround?"
- disabledInput : Model -> List (Html Msg)
- disabledInput model =
- [ input
- [ id "my-input"
- , type_ "text"
- , value model.currentValue
- -- vvvvvvvvvvvv Edit this
- , disabled True -- <<< Try to edit this line
- -- ^^^^^^^^^^^^ Try set this to False
- , onClick StartEdit
- ] [] ]
- enabledInput : Model -> List (Html Msg)
- enabledInput model =
- [ input
- [ id "my-input"
- , type_ "text"
- , value model.currentValue
- , onInput UpdateCurrentValue
- ] []
- , button
- [ type_ "button"
- , onClick SaveChanges
- ] [ text "Save changes" ]
- ]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement