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
- Analysiere das Programm und beschreibe die Funktionsweise.
- Erweitere das Programm zur Verschlüsselung so, dass der Benutzer den zu verschlüsselnden Text eingeben kann.