Elm: 复制文本到剪贴板

Question

当用户在elm 0.18中单击按钮时，有没有一种方法将文本从div复制到剪贴板？

我已经查看了Clipboard.elm，但我无法使其在elm 0.18中编译并工作。那么，在elm 0.18中有一种官方的有效方法来做到这一点吗？

- Buda Gavril

---

有很少的库包装js，因为它们无法发布。所以你可能想使用一个端口。在这种情况下，这将是相当简单的，因为你只需要一种方式（到js）通信，而这是更容易的部分。 - Simon H

Answer 1

如果目标浏览器支持，那么您可以通过端口来实现，例如：

elm:

type Msg = Copy

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case Debug.log "msg" msg of
    Copy -> (model, copy ())

port copy : () -> Cmd msg

-- VIEW
view : Model -> Html Msg
view model =
  div []
    [ Html.input [ id "copy" ] []
    , Html.button [ onClick Copy ] [ text "copy" ]
    ]

JavaScript：

const app = Elm.Main.fullscreen();
app.ports.copy.subscribe(() => {
  console.log('copy');
  document.querySelector('#copy').select();
  document.execCommand('copy');
});

- Tosh

---

请注意：此解决方案在 Firefox 41+ 中不起作用，因为它对可以执行复制命令的上下文要求非常严格。请参见 https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Browser_compatibility 以获取更多信息。对于 Elm 运行时有更好理解的人可能能够解释为什么回调函数没有在事件循环中被调用... - Simon Calvin

Answer 2

从 Elm 0.19 开始，自定义 Web 组件 可能是一种很好的实现方式。我已经成功地使用了这个。

- Nat Knight