elm：将文本复制到剪贴板答案

【问题标题】：elm: copy text to clipboardelm：将文本复制到剪贴板
【发布时间】：2022-03-17 07:12:45
【问题描述】：

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

我查看了Clipboard.elm，但我无法让它在 elm 0.18 中编译和工作。那么在 elm 0.18 中是否有官方的工作方式来做到这一点？

【问题讨论】：

很少有库会封装js，因为不能发布。所以你可能想要使用一个端口。在这种情况下，这将是非常简单的，因为您只需要一种方式（与 js 通信），这更容易

标签： clipboard elm clipboard.js

【解决方案1】：

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

榆树：

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');
});

【讨论】：

请注意，此解决方案在 Firefox 41+ 中不起作用，这对您可以执行复制命令的上下文非常严格。有关（一点）更多信息，请参阅developer.mozilla.org/en-US/docs/Web/API/Document/…。对 Elm 运行时有更好理解的人可能可以解释为什么在事件循环中不调用回调...

【解决方案2】：

从 Elm 0.19 开始，custom web component 可能是执行此操作的好方法。我在this one 上取得了成功。

【讨论】：