Help us understand the problem. What is going on with this article?

Chrome, Firefox, IEのCopy & Paste実装方法

More than 1 year has passed since last update.

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>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away