如何閱讀contentEditable div的內容？

Question

我使用contentEditable div，我想在用戶修改它（onBlur）後訪問它的內容。我如何訪問DOM元素的innerHtml或textContent？任何想法 ？

下面是一個簡單的例子：

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" 

我要替換「OK」使用textContent獲取用戶輸入的值的公式。我使用榆樹v 0.17。

Answer 1

這是一種方法。 您必須使用Json.Decode從事件對象中提取值。

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

我一點點額外的用戶幫助合併託什的答案用Dom.focus使點擊的元素並進行編輯時，光標變成正確可見。

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 ]