【javaScript・jQuery】クリップボードへのコピーをする(iPhone・androidに対応)

JavaScript

2018.12.21

javaScriptで、スマホでクリップボードにコピーするためのコードを紹介します。

execCommandというのを使うのですが、このメソッドは、

androidのchromeでは、結構前から対応しているのですが、

iPhoneに関しては、iOS10のSafariから対応しています。

これより古いバージョンでは、javaScriptを使用しての

クリップボードへのコピーには対応していないので注意してください。

注意点としては、
・iPhoneとandroid用で場合分けが必要。
・input/textareaタグの中の値しかコピーできない。
・コピーする要素を「選択する」ことが必要
・iOSの場合、inputタグがreadOnlyだとコピーできないので、
　javaScriptの中でreadOnlyを外す。

それぞれで使える関数が違うためです。＊最初はここがわからなくて苦労しました。

[サンプル]

では、さっそくコードを紹介します。

[index.html]

<!-- コピーしたい部分 -->
<input id="copyText" readonly="readonly" type="text" value="ここがコピーされます。" />
<button onclick="clipCopy()">コピーする</button>
<script src="index.js"></script>

[index.js]

function clipCopy() {
    // コピー対象の要素を取得
    var copytext = document.getElementById('copyText');
    // 使用端末を区別し、iOSとandroidで処理を分ける。
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
        // iphone用のコピー設定
        try {
            // iOSの場合、readOnlyではコピーできない(たぶん)ので、
            // readOnlyを外す
            copytext.readOnly = false;
            // ここから下が、iOS用でしか機能しない関数------
            var range = document.createRange();
            range.selectNode(copytext);
            window.getSelection().addRange(range);
            // ------------------------------------------
            document.execCommand("copy");
            // readOnlyに戻す
            copytext.readOnly = true;
            alert("URLをコピーしました。");
        } catch (e) {
            // エラーになった場合も、readOnlyに戻す
            copytext.readOnly = true;
            alert("このブラウザでは対応していません。");
        }
    } else {
        // iphone以外のコピー設定
        try {
            copytext.select();
            document.execCommand('copy');
            alert("URLをコピーしました。");
        } catch (e) {
            alert("このブラウザでは対応していません。");
        }
    }
};