html - 在 Elm 中更新 contenteditable div 时光标位置丢失

Question

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

我正在使用 Elm 创建一个文本框，我需要在每次输入时处理框中的文本。使用 contenteditable div 而不是 textarea 的原因是我需要能够识别某些单词并在您键入时将它们变成可点击的链接。

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

这是一个演示问题的最小示例:

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 比较并重新呈现 View 时，更改的选择属性没有被浏览器重新呈现，同时保留 HTML。我在那里使用了一种 hack 方法解决了这个问题，该 hack 在每次迭代时重排内容，从而强制元素实际重新呈现，并正确应用选择属性。

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