Ctrl + Cでクリップボードに任意の値をコピーしたい場合に、Chrome, Firefox, IEでどう実装するかまとめました。
クリップボードを操作するにはFlashを使うのがベタですが、その場合必ずFlashのボタンを押さないとクリップボードにアクセスできません。
今回はCtrl + Cでクリップボードにコピーしたいということで、HTML5のClipboard APIやIEのwindow.clipboardDataを使って実装します。
Chrome, Firefoxの場合
HTML5のClipboard APIを使います。
クリップボードイベント(copy, paste, cut)発生時のみ使用可能で、任意のタイミングでのクリップボード操作はできません。
まだドラフト版のAPIなので色々と制約があるみたいですが、基本的なCopy & PasteはChrome, Firefox両方ともサポートしています。
document.addEventListener('copy', function(e) {
e.preventDefault();
e.clipboardData.setData('text/plain', 'Hello, world!'); // copy
});
詳しくはこちらを参照してください。
Clipboard API and events
IEの場合
IE独自仕様のwindow.clipboardDataを使ってクリップボードを操作します。
こちらはJavaScriptから任意のタイミングでクリップボードにアクセス可能です。
document.addEventListener('copy', function(e) {
e.preventDefault();
window.clipboardData.setData('Text', 'Hello, world!'); // copy
});
サンプル
ボタンをクリックしてCtrl + Cを押すと、クリップボードに値をコピーできるサンプルです。
Flashと違いCtrl + Cのタイミングでコピーできるのがポイントです。
clipboard-copy-sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Clipboard Copy Sample</title>
</head>
<body>
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
document.addEventListener("copy", function(e) {
e.preventDefault();
if (userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/)) {
window.clipboardData.setData("Text", document.form.dummy.textContent); // IE
} else {
e.clipboardData.setData('text/plain', document.form.dummy.textContent); // Chrome, Firefox
}
});
function select() {
document.form.dummy.focus();
document.form.dummy.select();
}
</script>
<button id="button" onclick="select();">テキストを選択</button><br>
<form name="form">
<textarea style="width: 300px; height: 200px;"></textarea>
<textarea name="dummy" style="width: 0px; height: 0px; position: absolute; top: -100px;">サンプルテキスト</textarea>
</form>
</body>
</html>