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

我希望使用textContent将公式替换为"ok" 以获取用户输入的值.我正在使用elm 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)