dom-events - Elm onInput 事件处理程序不适用于 contenteditable 元素
问题描述
每次有人修改可编辑的表格单元格时,我都想更新我的模型。
onInput函数似乎在元素上运行良好,input
但在带有 的td
元素上contenteditable="true"
,处理函数永远不会被调用。为什么?那么我应该如何检测可编辑表格单元格中的内容更改?
请参阅以下代码中的第74 行和第 78 行(我刚刚采用了 Elm 指南的“按钮”示例,并将我的东西添加到其中以获得最小但可运行的东西):
module Main exposing (..)
-- Press buttons to increment and decrement a counter.
--
-- Read how it works:
-- https://guide.elm-lang.org/architecture/buttons.html
--
import Browser
import Html exposing (Html, button, div, text, table, tbody, tr, td, input)
import Html.Events exposing (onClick, onInput)
import Html.Attributes exposing (contenteditable)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg
= Increment
| Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
testOnInputHandler : String -> Msg
testOnInputHandler str =
let
log = Debug.log "in testOnInputHandler" "here"
in
Increment
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
, table []
[ tbody []
[ tr []
[ td [ contenteditable True, onInput testOnInputHandler] [ text "editable!" ]
]
]
]
, input [ onInput testOnInputHandler ] []
]
解决方案
onInput
将从中获取事件target.value
不存在的字符串。contenteditable
input
例如,您可能想要抓取innerText
:
onContentEditableInput : (String -> msg) -> Attribute msg
onContentEditableInput tagger =
Html.Events.stopPropagationOn "input"
(Json.map (\x -> ( x, True )) (Json.map tagger innerText))
innerText : Json.Decoder String
innerText =
Json.at ["target", "innerText"] Json.string
推荐阅读
- selenium - Appium - 将许多设备注册到 selenium grid docker
- java - 可选的 orElse 意外抛出 NPE;取 null 作为值
- vba - 如何在没有编译/运行时错误的情况下识别损坏的 vba 代码?
- sql-server - 如何在sql中获取两个日期时间之间的小时数?
- javascript - onClick 锚标记使用 jquery 显示当前 div
- firebase - 存储标签以获得良好查询选项的方式?
- server-side - 通过 PHP 或 Javascript 构建 HTML 页面?服务器端与客户端
- java - 有没有一种方法可以像使用 ListView 或 RecyclerView 一样使用 firebaseUI 填充微调器项目?
- java - Android:单击后退按钮时如何退出活动而不关闭它?
- laravel - laravel 在登录后保留访客的会话