[JavaScript] クリップボードへコピー/切り取りを実装する

投稿日：2017年8月25日更新日：2018年6月3日

JavaScriptで、clipboardへのコピー/切り取りを実装するサンプルです。

サンプルソース

例）ボタンを押すとテキストボックスの値をclipboardへコピーする

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function cp(){
  document.getElementById('txt1').select();
  document.execCommand('copy');  //選択中のものをクリップボードへコピーする
  alert('コピーしました。');
}
</script>
</head>
<body>
  <input type="text" value="hoge" id="txt1">
  <input type="button" value="ボタン" onclick="cp();">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

function cp(){

document.getElementById('txt1').select();

document.execCommand('copy'); //選択中のものをクリップボードへコピーする

alert('コピーしました。');

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、テキストボックスの値をクリップボードへコピーします。

上記ボタンを押した後に、テキストエディタ等へ値を貼り付ける事ができます。

解説

clipboardへコピーするには、document.execCommand('copy');を使用します。
現在選択中の値がコピー対象となります。
切り取りは、document.execCommand('cut');を使用します。

執筆者：とら