如何阅读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 ]