LoginSignup
68
60

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-06-19

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>
68
60
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
68
60