Question

在简单的html + js应用程序中，当我需要打开某些交互式输入元素（例如input[type="file"]或input[type="date"]或input[type="color"]）的对话时，任何非标准方式（使用按钮）或者在页面加载时，最直接的方法是trigger click event上面提到的元素。但我找不到在纯榆树（无端口）中做到这一点的方法。我看到DOM事件操作有focus trigger，但没有click。我错过了什么吗？这不是做事的“榆树方式”吗？

Answer 1

您可以（ab）使用Html.attribute可以采用任意字符串的方式（即Html.attribute "onclick" "javascript:someFunction(this)"）。在一些的情况下，这是合理的，因为它可以提供最少的摩擦力。例如，如果您想要一个聚焦隐藏文件输入的按钮，并且它很好地包装在一个组件/视图文件中，它始终是一个按钮后跟一个文件输入，这是有道理的：

import Html exposing (..)
import Html.Attributes as Attr exposing (..)
import Html.Events exposing (on)


filePick : Html msg
filePick =
    div [ class "file-pick-wrapper" ]
        [ button 
            [ type_ "button"
            , attribute "onclick" "javascript:this.nextElementSibling.click()" 
            ] 
            [ text "Choose a File" ]
        , input
            [ type_ "file"
            , on "change" someMsgDecoder
            , style [ ( "display", "none" ) ]
            ]
            []
        ]

从那里，您可以someMsgDecoder使用Json.Decode来读取at [ "target", "files", "0", "name" ]文件名。

Answer 2

通过File元素上的MDN阅读我看到他们建议使用<label>来触发没有JavaScript的元素：

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<label for="fileElem">Select some files</label>

elm-fileinput https://developer.mozilla.org/en/docs/Using_files_from_web_applications

找到<input type="file">的{{3}}图书馆。

此外，我还使用此库中的解码器提供了一个工作示例：https://github.com/lovasoa/elm-fileinput。

如何在elm中触发click事件

2 个答案: