javaScriptにおいて、任意の文字列をユーザアクション(ボタンを押す等)からクリップボードにコピーする。
execCopy関数をDOMが準備完了次第に実行すると、「document.execCommand(‘cut’/‘copy’) はユーザー生成の短期的なイベントハンドラーの内部からの呼び出しでないため拒否されました。」と警告が出る。警告が出てクリップボードにコピーされていない。
一部のブラウザや環境では JavaScript からのクリップボードアクセスが制限されていることがある。また、ユーザーのブラウザ設定によってもクリップボードアクセスが制約されることがるらしい。
ボタンをクリックしてクリップボードにコピーはできるみたいだな。
execCopy関数の中身は理解していない。まだ今度、解読することにしよう。
execCopy関数に文字列を渡すとクリップボードにコピーされる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>任意の文字列をユーザアクションからクリップボードにコピーする</title>
<style>
</style>
</head>
<body>
<button>ボタン</button>
<div id="result"></div>
<script type="text/javascript" src="js/jquery-3.6.3.min.js"></script>
<script>
function execCopy(string) {
var temp = document.createElement('div');
temp.appendChild(document.createElement('pre')).textContent = string;
var s = temp.style;
s.position = 'fixed';
s.left = '-100%';
document.body.appendChild(temp);
document.getSelection().selectAllChildren(temp);
var result = document.execCommand('copy');
document.body.removeChild(temp);
// true なら実行できている falseなら失敗か対応していないか
return result;
}
$(function() {
const ret = execCopy("クリップボードにコピー(DOM読み込み直後)");
$("#result").html(ret);
$('button').click(function() {
const ret = execCopy("クリップボードにコピー(ボタンクリック)");
$("#result").html(ret);
})
});
</script>
</body>
</html>
読み込み直後のfirefox 114.0.1 (64 ビット)での警告は次の通り。
私の知らないブラウザとJavaScriptの仕様がいっぱいあるな。
警告は次の通り。
document.execCommand(‘cut’/‘copy’) はユーザー生成の短期的なイベントハンドラーの内部からの呼び出しでないため拒否されました。
文字列をユーザアクションからクリップボードにコピーする copy execCopy clipboard · GitHub ExternalLink
任意の文字列をユーザアクション(ボタンを押す等)からクリップボードにコピーする解説の記事は次の通りである。
【JavaScript】textContentとinnerHTMLとappendChild (attacktube.com)
【JavaScript】document.execCommand (attacktube.com)