2016-12-09 10 views
3

ユーザーがelm 0.18のボタンをクリックすると、divからクリップボードにテキストをコピーする方法はありますか?elm:クリップボードにテキストをコピー

私はClipboard.elmを見ましたが、コンパイルしてelm 0.18で動作させることはできません。 elm 0.18でこれを行うための正式な作業方法はありますか?

+0

あり非常にいくつかのライブラリパブリッシュできないためjsをラップします。したがって、おそらくポートを使いたいと思うでしょう。この場合、片方向の(jsへの)通信だけが必要なのでかなり簡単です。これは簡単なビットです –

答えて

3

ターゲットブラウザがサポートしていれば、あなたは は、例えば、ポートを介してそれを行うことができます。

ニレ:

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

このソリューションはFirefox 41+では動作しません。コピーコマンド。詳細については、https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Browser_compatibilityを参照してください。 Elmランタイムをよりよく理解している人は、イベント・サイクルでコールバックが呼び出されない理由をおそらく説明できます。 –

関連する問題