以前は、JavaScript でクリップボードを操作してテキストをコピーしたり貼り付けたりするのはとても面倒でした。NTUST.ME（台湾科技大学の短縮URLサービス）を開発したとき、短縮した URL をみんなが簡単にコピーできるようにしたいと思い、JavaScript のクリップボード API を調べました。すると、新しめのブラウザには execCommand という関数があり、コピーや全選択など、便利なテキスト操作がたくさんできることが分かりました。では、ご紹介しましょう！

おそらくセキュリティ上の理由から、現在はクリップボードのテキストを読み取る（貼り付ける）ことはできず、データをクリップボードに入れる（コピーする）ことしかできないと思われます。

ブラウザの互換性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
copy/cut43?41 (41)92910

サンプルコード

// Native JS Version
function copy(s) {
  var clip_area = document.createElement('textarea');
  clip_area.textContent = s;

document.body.appendChild(clip_area);
clip_area.select();


document.execCommand(‘copy’);
clip_area.remove();
}

//jQuery Version
function copy(s) {
  $('body').append('<textarea id="clip_area"></textarea>');

var clip_area = $(’#clip_area’);


clip_area.text(s);
clip_area.select();


document.execCommand(‘copy’);


clip_area.remove();
}

コードの説明

document.execCommand は、ブラウザが提供するテキスト編集 API です。ここで使ったコピーのほかにも、Textarea の中で太字、斜体、ハイパーリンクなどの書式を作ることもできます。

ここでの方法は、まず Textarea 要素を作成してコピーしたいテキストを入れ、全選択します。次に document.execCommand(‘copy’) を実行してテキストをコピーし、最後に Textarea 要素を削除します。処理がとても速いので、Textarea の存在はほとんど気になりません。注意点として、Textarea を非表示にしてはいけません。非表示にするとテキストがコピーされなくなります！

参考資料