Texteingabe

Eingabe von Text

Du musst nun nur noch lernen wie man Text eingibt und verarbeitet. Der größte Unterschied zur Behandlung eines Mausklicks liegt in der Art der Nachricht. Während ein Mausklick keine zusätzlichen Informationen benötigt, muss bei der Eingabe von Text die Eingabe selbst übergeben werden. Deshalb wird bei onInput eine Funktion übergeben, die aus einer Zeichenkette eine Nachricht erstellt, während bei onClick direkt die Nachricht übergeben wird. Das folgende Programm gibt dir ein Beispiel dafür.

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)


type Msg
    = Eingabe String


update msg model =
    case msg of
        Eingabe zeichenkette ->
            { inhalt = zeichenkette }


view model =
    div []
        [ input
            [ placeholder "Hier Text eingeben"
            , value model.inhalt
            , onInput Eingabe
            ]
            []
        , div [] [ text (String.reverse model.inhalt) ]
        ]


main =
    Browser.sandbox
        { init = { inhalt = "" }
        , view = view
        , update = update
        }

Aufgabe 1