IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

ワンクリックでテキストをコピーする方法-PC・スマホ対応【JavaScript】

 

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

 

JavaScript - コピー方法

DEMO

入力欄

 

 

入力欄以外

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)) {
        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
}

 

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)) {
        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
}