Posted at

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

More than 3 years have passed since last update.

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属性がコピーされた・・・

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