document.execCommand('copy')してみる

Chrome43がきたのでここを参考にdocument.execCommandでコピーしてみる。

とりあえずやってみる

まずはミニマムでやる。
テキストを選択した状態でdocument.execCommand('copy')を実行する。
ユーザーアクションをトリガーにしないとだめっぽい。

ミニマム

elm.addEventListener('click', function() {
  document.execCommand('copy');
});

demo

ダミーのテキストはBlindtext-Generatorから拝借。

適当にテキストを選択してcopyボタンを押すとクリップボードにコピーされてる。

よさげ。

特定要素内のテキストをコピー

Rangeオブジェクトを作成し、コピーしたい要素を指定する。

特定要素内のテキストをコピー

elm.addEventListener('click', function() {
  var target = document.getElementById('target');
  var range = document.createRange();
  range.selectNode(target);
  window.getSelection().addRange(range);

  document.execCommand('copy');
});

demo

よいよ。

特定範囲内のテキストをコピー

10文字目から30文字目までをコピーする。

特定範囲内のテキストをコピー

elm.addEventListener('click', function() {
  // 求）TextNodeのスマートな取得方法
  var pText = document.querySelector('p').firstChild;
  var range = document.createRange();
  range.setStart(pText, 10);
  range.setEnd(pText, 30);
  window.getSelection().addRange(range);

  document.execCommand('copy');
});

demo

とてもよいよ。

画像をコピー

selectNodeにimg要素を渡してみる。

画像をコピー

elm.addEventListener('click', function() {
  var image = document.querySelector('img');
  var range = document.createRange();
  range.selectNode(image);
  window.getSelection().addRange(range);

  document.execCommand('copy');
});

demo

trueが返ったので期待してたらalt属性がコピーされた・・・

もうちょいちゃんと調べないと使いこなせなさそう。