読者です 読者をやめる 読者になる 読者になる

ノイズブログ

色んな雑音に影響されて感じたことを発信するブログ

いつの間にかJavaScriptでクリップボード操作が出来るようになってた

web 開発 javascript

コピーやペーストをWebページ上で制御したいって思った時に
色々調べたら数年前はFlashを利用する方法しか出てこなかった気がしました。
が、
今はそこそこ制御できるAPIが揃ってるみたいですね。

以下の2つのAPIを利用すれば制御できそうなので調べてみました。

モバイルでは動作しない可能性が高いです

document.execCommand

コピーやペーストなどのコマンドをJavaScriptから実行する関数。
引数にコマンドの名前("copy"など)を渡して実行するタイプになります。
色々なコマンドに対応しているのでコピー&ペースト専用の関数ではありません。

developer.mozilla.org

モバイルブラウザは未対応がまだ多いです。
基本的にdocument.queryCommandSupported({command})
コマンドがサポートされているか調べてから使うのが良さそうです。

var isSupport = document.queryCommandSupported("copy");
if (isSupport) {
    document.execCommand("copy");
} else {
    // 利用不可通知、もしくは代替処理実行
}

現在選択状態に置かれている文字列をコピーするようになっているため、
任意の文字列を選択させておき上記の関数を呼び出すことになります。
またこの関数はユーザの操作に紐付いてしか実行できないため、
イベントハンドラ内に処理を記述することが多いでしょう。

使用例
document.getElementById("copyButton"). addEventListener("click", function (ev) {
    var isSupport = document.queryCommandSupported("copy");
    if (isSupport) {
        document.getElementById("targetArea").select();// ここで任意のエリアの文字を全選択
        try {
            var isSuccess = document.execCommand("copy");
            if (isSuccess) {
                console.log("Success to copy");
            } else {
                console.log("Failed to copy");
            }
        } catch (e) {
            console.log("Failed to copy");
        }
    } else {
        // 利用不可通知、もしくは代替処理実行
    }
});

"copy"や"cut"コマンドは、いくつかの状況によりエラーを投げる場合があるようなのでtry catchで囲んで呼び出すのが定石のようです。




Clipboard API

こちらはコピーやペーストの際のイベントに処理を紐付けることが
できるAPIです。

developer.mozilla.org

Emailアドレスやパスワードなどの
確認フォームでのコピペ対策に利用できそうです。

使用例
document. addEventListener("copy", function (ev) {
    if (ev.target.type === "text") {
        ev.preventDefault();// 元のコピーイベントを抑止する
        ev.clipboardData.setData("text/plain", "");// コピーデータを空文字に置き換える
    }
});
document. addEventListener("paste", function (ev) {
    if (ev.target.type === "email") {
        ev.preventDefault();//貼り付けイベント抑止
    }
});




これ、ペーストのタイミングだけではなく
コピーのタイミングでもクリップボードの情報書き換えられるので
ちょっと恐ろしいですが。。

まとめ

このような形で、JavaScriptでもそこそこClipBoard周りの制御ができるように
なっているみたいです。
まだまだ未対応のブラウザなどもありますが
今後の対応に期待したいところです。