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
})();

こんな感じでしょうか。先の記事でも言われていますが、ユーザーアクションに対して使うようにしましょう。

割と最近のブラウザでは動くっぽいです。IEも10以上ならOKなのかな。これくらいなら場合によっては導入可能かも。

いつ使おうか

私のようにブログにソースコードを書くような人とは相性がいいスニペットだと思います。そのうちカエレバジェネレーターに導入しようかな、ちょっとは使いやすくなりそうですね。

便利なのは間違いないんですが、なかなか利用シーンが浮かびません、いつものパターンです。

さいごに

ブラウザのアプデにともなってJavaScriptでできることがどんどん増えていきますね。コード書く側は覚えることがたくさんあって大変ですが、便利になるのは良いことです。

これといった使いどころがわかりませんが、レガシーブラウザを無視していいという条件があったら導入してみようかと思います。

ではでは、最後までお付き合いいただきありがとうございました。