ワンクリックでテキストをコピーする方法-PC・スマホ対応【JavaScript】追記：iOSでズーム,拡大させない

JavaScript - コピー方法
- DEMO
  - 入力欄
  - 入力欄以外
- コード
- 例
- 更新情報

投稿日 2019/10/03

PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。

当記事のコピー処理が動作したブラウザ

Chrome,Microsoft Edge,Firefox,Safari(iOS)

JavaScript - コピー方法

DEMO

入力欄

textarea sample text 112358130000000

貼り付け用

入力欄以外

p sample text

貼り付け用

div sample text

貼り付け用

コード

function copy(id) {
    var copyText = document.getElementById(id);
    var ua = navigator.userAgent;
    if (ua.match(/iphone|ipod|ipad|android/i)) {
        try {
            copyText.select();
        } catch (error) {}
        var range = document.createRange();
        range.selectNode(copyText);
        window.getSelection().addRange(range);
    }
    else {
        try {
            copyText.select(); // input field
        } catch (error) {
            document.getSelection().selectAllChildren(copyText);
        }
    }
    var result = document.execCommand("copy");
    return result
}

追記

iOS端末(アイホン(iPhone)やアイパッドなど)でコピー時にズームする処理を無効にしてコピーする方法

function copy(id) {
    var copyText = document.getElementById(id);
    var ua = navigator.userAgent;
    if (ua.match(/iphone|ipod|ipad|android/i)) {
        let viewPort=$("meta[name=viewport]");
        let viewPortExistsFlag=false;
        if (ua.match(/iphone|ipod|ipad|/i)) { // iosの場合 ズームさせない
            if(viewPort.length<1){ // 存在しなければ、生成する
                viewPort=$(document.createElement("meta")).attr({"name":"viewport","content":"user-scalable=no"});
                $("head").append(viewPort);
            }else{
                viewPort.attr("content",viewPort.attr("content")+",user-scalable=no");
                viewPortExistsFlag=true;
            }   
        }
        try {
            copyText.select();
        } catch (error) {}
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.selectNode(copyText);
        window.getSelection().addRange(range);
        if (ua.match(/iphone|ipod|ipad|/i)) { // iosの場合 ズームさせない
            if (!viewPortExistsFlag) {
                viewPort.remove();
            }else{
                viewPort.attr("content",viewPort.attr("content").replace(",user-scalable=no",""));
            }
        }
    }
    else {
        try {
            copyText.select(); // input field
        } catch (error) {
            document.getSelection().selectAllChildren(copyText);
        }
    }
    var result = document.execCommand("copy");
    return result
}

例

sample HTML CSS JS

<textarea id="sample-copytext">
    sample text
</textarea>
<br>
<button onclick="copy('sample-copytext')">
    copy
</button>

function copy(id) {
    var copyText = document.getElementById(id);
    var ua = navigator.userAgent;
    if (ua.match(/iphone|ipod|ipad|android/i)) {
        try {
            copyText.select();
        } catch (error) {}
        var range = document.createRange();
        range.selectNode(copyText);
        window.getSelection().addRange(range);
    }
    else {
        try {
            copyText.select(); // input field
        } catch (error) {
            document.getSelection().selectAllChildren(copyText);
        }
    }
    var result = document.execCommand("copy");
    return result
}