elm - 如何读取 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)