榆树：将文本复制到剪贴板

Question

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

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

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

Answer 2

截至 Elm 0.19 a custom web component might be a good way to do this. I've had success with this one.

榆树：将文本复制到剪贴板

elm: copy text to clipboard

clipboard

elm

clipboard.js