概要
クリップボードにコピーではまりました。
ブログ記事に紹介された方法が古くなってたりしたので、ひとまず整理しとこうかと書きました。
変更履歴
2021-11-12 一部のスマホアプリ内ブラウザで動かなかったので対応しました
結論
/**
* クリップボードにコピー
* @param string value コピーする文字列
*/
function copyToClipboard(value) {
// モダンブラウザ
if (typeof navigator.clipboard === 'object') {
navigator.clipboard.writeText(value).then(function() {
// 成功
console.log('clipboard.writeText OK');
}, function() {
// 失敗（アプリ内蔵ブラウザの一部はここを通る）
let result = copyToClipboard2(value);
console.log('writeText NG, copy ' + ((result !== false) ? 'OK' : 'NG'));
});
return;
}
// IE
if (typeof window.clipboardData === 'object') {
window.clipboardData.setData('Text', value);
// 結果の確認方法は不明
console.log('clipboardData.setData DONE');
return;
}
// 旧来の汎用的なやり方（？）
let result = copyToClipboard2(value);
console.log('copy ' + ((result !== false) ? 'OK' : 'NG'));
}
/**
* クリップボードにコピーを、body末尾にdomを追加する方法で行う
* @param string value コピーする文字列
* @return 失敗した場合はfalse
*/
function copyToClipboard2(value) {
// 旧来の汎用的なやり方（？）
const CLASS_NAME = 'temp_class_name_for_clipboard_copy';
const SELECTOR = 'input.' + CLASS_NAME;
$('body').append($('<input type="text" class="' + CLASS_NAME + '" value="' + value + '" />'));
dom = $(SELECTOR)[0]
dom.select()
let result = document.execCommand("copy");
$(SELECTOR).remove();
return result;
}
説明
- 主要ブラウザの最新版を使っていれば、
navigator.clipboard.writeText()でいけます。- 2019年頃はまだブラウザに採用されてなかったみたいですが、今回はほぼこれ1個で行ける結果になりました。
- 対応することでモチベーションが削られるIEに関しては、専用の機能を使います。
2. 一次資料見つかりませんでした。さすがIE。 - それらが使えなかったとき用の保険で、旧来からある「ダミーつくってコピー」をつけました。
2. ただし execCommand は 今はDeprecatedになってます。
2. 今回これが動くケースはなかったので
2. 見えない位置にとかスマホのときに諸々といった細かいことは省きました。
2. 保険でちょっとマシになればいいなー程度です。
2. サンプルとしてはjquery非依存のほうがいいんですけどそれも省きました。 - [2021-11-02追記] 一部のスマホアプリ内ブラウザのためのコードを追記しました。AndroidのLINEほかいくつかです。
4.typeof navigator.clipboard === 'object'かつtypeof navigator.clipboard.writeText === 'function'のくせに、実行すると必ず失敗します。なんなんよ
4. 仕方ないので、失敗時に「旧来からある汎用的なやり方」を付け足しました。