JavaScriptだけで任意の文字をクリップボードにコピーする

こんにちは、つばさ（@tsubasa123）です。

これはもう少し早く知りたかった。Flash使わなくてもできたのね。割と最近のことみたいなのでこっちでもメモっておきます。

元ネタはこちら
コピペでどうぞ
いつ使おうか
さいごに

元ネタはこちら

qiita.com

選択したテキストをもとに、動的にtextarea要素を作り出して、document.execCommand()メソッドを実行するとクリップボードにコピーできる、って仕組みになっています。すごい、これ便利。

記事の中で紹介されていたのでこちらも参考にしました。

qiita.com

そういえば選択範囲の取得はこの前やりました。よければこちらもご覧ください。

www.tsubasa-note.blog

先の例ではバニラJSで書かれていましたので、私はjQueryバージョンでメモしときます。

コピペでどうぞ

(function() {
'use strict';
const execCopy = (str) => {
const $tx = $('<textarea>'), tx = $tx.get(0);
$tx.val(str);
$tx.css({position: 'fiexd', left: '-100%'});
tx.selectionStart = 0;
tx.selectionEnd = str.length;
document.body.appendChild(tx);
tx.focus();
const result = document.execCommand('copy');
tx.blur();
document.body.removeChild(tx);
return result;
};
$('#btn').on('click', function() {
console.log(execCopy('hogehoge')); // true
});
//console.log(execCopy('hogehoge')); // false
})();