wie Inhalt des Inhalts zu lesen Editable div?

Question

Ich verwende ein contentEditable div, und ich möchte auf den Inhalt zugreifen, nachdem der Benutzer es geändert hat (onBlur). Wie kann ich auf den innerHtml oder textContent des DOM-Elements zugreifen? Irgendeine Idee ?

Hier ist ein einfaches Beispiel:

import Html exposing (div, text) 
import Html.App exposing (beginnerProgram) 
import Html.Events exposing (onBlur) 
import Html.Attributes exposing (contenteditable) 


main = 
    beginnerProgram { model = "Hello", view = view, update = update } 


view model = 
    div [contenteditable True, onBlur (SaveInput)] [ text model ] 


type Msg = SaveInput 


update msg model = 
    case msg of 
    SaveInput -> 
     "ok" 

Ich wünsche „ok“ mit einer Formel textContent Verwendung ersetzen Sie den Wert vom Anwender eingegeben zu bekommen. Ich benutze Ulme v 0.17.

Answer 1

Hier ist eine Möglichkeit, es zu tun. Sie müssen den Wert aus dem Ereignisobjekt mithilfe von Json.Decode extrahieren.

import Html exposing (Html, div, text) 
import Html.App exposing (beginnerProgram) 
import Html.Events exposing (onBlur, on) 
import Html.Attributes exposing (contenteditable, id) 
import Json.Decode as Json 
import Debug 

main : Program Never 
main = beginnerProgram { model = "Hello" , view = view , update = update } 

type alias Model = String 

view : Model -> Html Msg 
view model = 
    div [ contenteditable True ,on "blur" (Json.map SaveInput  targetTextContent)] 
    [ text model ] 

targetTextContent : Json.Decoder String 
targetTextContent = 
    Json.at ["target", "textContent"] Json.string 

type Msg = SaveInput String 

update : Msg -> Model -> Model 
update msg model = 
    case msg of 
    SaveInput str -> (Debug.log "saving" str) 

Answer 2

I kombiniert durch Toshs Antwort mit ein wenig mehr Benutzerhilfe Dom.focus so verwenden, dass auf dem Element nach dem Klicken auf den Cursor zu bearbeiten, richtig sichtbar wurde.

update ... = 
     EditTitle -> 
      (model | editTitle = True } 
      , Dom.focus "view-title" |> Task.attempt FocusResult 
      ) 



viewNameEditor : Model -> Html Msg 
viewNameEditor m = 
    let 
     attrs = 
      if m.editTitle then 
        [ contenteditable True 
        , on "blur" (Json.map SaveViewName targetTextContent) 
        , id "view-title" 
        ] 

      else 
        [ contenteditable False 
        , onClick EditTitle 
        , id "view-title" 
        ] 
    in 
     div attrs [ text current.name ]