更新Elm中的可编辑内容div时光标位置丢失

Question

在内容可编辑的div中输入内容时，如何将光标保持在正确的位置？

我正在使用Elm创建一个文本框，我需要在每个输入上处理框中的文本。使用可内容编辑的div而不是文本区域的原因是，我需要能够识别某些单词，并在您键入时将它们转换为可点击的链接。

问题是，当文本更新时，光标会回到文本的开头，所以所有内容都是从后到前键入的。

下面是一个演示该问题的最小示例：

module Main exposing (..)

import Html
import Html.Events as Hev
import Html.Attributes as Hat
import Json.Decode as Json

main : Program Never Model Msg
main =
    Html.beginnerProgram
        { model = ""
        , update = update
        , view = view
        }

type Msg = NewText String

type alias Model = String

view : Model -> Html.Html Msg
view model =
    Html.div
        [ Hat.contenteditable True
        , Hev.on "input" (Json.map NewText targetTextContent)
        , Hat.style
            [ ("border", "1px solid darkgray") ]
        ]
        [ Html.text model
        ]

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

update : Msg -> Model -> Model
update msg model =
    case msg of
        NewText text -> text

Answer 1

这似乎与这里的问题非常相似：Elm - textarea selection range disappearing

这里的问题是，当Elm不同并重新呈现视图时，浏览器不会重新呈现更改后的selection属性，而是保留HTML。我用hack解决了这个问题，在每次迭代中重排内容，从而强制元素实际重新呈现，并正确应用selection属性。

在您的模型中放置一个计数器，并在每次渲染视图时增加它。然后在文本框元素前面插入一个空的div。(if i % 2 == 0 ...)