JavaScriptだけで実装可能!クリップボードのコピー&ペースト処理

JSで実装可能!クリップボードでコピー&ペースト処理

投稿日:

JavaScriptでコピー&ペーストをする方法

Javascriptでコピー&ペーストをする方法はいくつかあります。
大きく分けて以下の2つの方法があります。

  • document.execCommandを使う方法
  • Clipboard APIを使う方法

前者の「document.execCommandを使う方法」はモダンブラウザであれば、基本対応しているので、こちらを使えばOKだと思います!

後者の「Clipboard API」はモダンブラウザでも対応していない場合があります。
ただ、クリップボードに関する様々なAPIが追加されています。
現状は「document.execCommand」で大丈夫ですが、将来のことを見据えて「Clipboard API」も学んでおきましょう!!

コピー

Javascriptでコピー機能を実装することで、ユーザはワンクリック(ワンタッチ)で文字列をコピーすることが出来ます。

例えば、Google検索にある翻訳機能にもコピーボタンがあります。
ボタン1つでコピーできればユーザビリティを向上させることが出来ます。
ユーザがコピーする可能性のある文言については、コピーボタンを設置してあげましょう!!

もちろん、当ブログのコード表示にもコピー機能があります!!

document.execCommandを使う方法

const copyText = (target) => {
  // テキストの選択
  document.getSelection().selectAllChildren(target);
  // 選択範囲のコピー
  document.execCommand("copy");
  // テキスト選択の解除
  document.getSelection().empty(target);
}

See the Pen テキストのコピー(document.execCommand) by カノト (@kanoto) on CodePen.

せっかくなので関数にまとめてみました!!
このまま持って行って大丈夫です~♪
※関数にラムダ式を使っているのでIEに対応している場合はご注意ください。

中身を解説していきます!

// テキストの選択
document.getSelection().selectAllChildren(target);

ここではコピーしたいテキストを選択しています。
テキストが入っている要素を引数(target)に渡してあげてください!

// 選択範囲のコピー
document.execCommand("copy");

ここでは実際に選択したテキストをクリップボードにコピーしています。

// テキスト選択の解除
document.getSelection().empty(target);

最後に対象のテキストの選択を解除しています。
この処理をしないと、コピーした後、下の画像のように選択状態が解除されないままになってしまいます。

Clipboard APIを使う方法

const copyText = (target_str) => {
// Clipboard APIが使えるかの確認
if(navigator.clipboard){
  // 対象となる要素のテキストをコピー
  navigator.clipboard.writeText(target_str);
  return true;
} else {
  return false;
}
}

See the Pen テキストのコピー(Clipboard API) by カノト (@kanoto) on CodePen.

コードの解説をしていきます!

// Clipboard APIが使えるかの確認
if(navigator.clipboard){
  return true;
} else {
  return false;
}

ここでは、表示中のブラウザが「Clipboard API」に対応しているかどうかを判断しています。
作成した関数では、対応していたら「true」対応していなければ「false」を返すようにしています。

// 対象となる要素のテキストをコピー
navigator.clipboard.writeText(target_str);

ここで、テキストをクリップボードにコピーしています。
注意したいのが、先ほどの「execCommand("copy")」の時は関数に要素を渡していたのに対して、こちらでは文字列を渡しています。

ペースト

ペースト機能は、各ブラウザで対応状況が変わってくるので、現状実装するのはあまりオススメ出来ません・・・。

コピーと違って、ペーストは使用する機会が少ないですが、使用する際には対応しているブラウザの場合のみペーストボタンを表示する対応が必要ですね!

また、「document.execCommand」でもペースト処理は用意されていますが、確認した限りだとペーストの機能は使えないようでした。

なので、現状は「Clipboard API」一択になりそうですね!

Clipboard APIを使う方法

const pasteText = (paste_function) => {
  // 閲覧しているブラウザが「navigator.clipboard」に
  // 対応しているか確認
  if(navigator.clipboard){
    // クリップボードにあるテキストを読み込み
    navigator.clipboard.readText().then((text) => {
      // 読み込んだテキストを操作
      paste_function(text);
    });
    return true;
  } else {
    return false;
  }
}

See the Pen テキストのペースト(clipboard API) by カノト (@kanoto) on CodePen.

コードの解説をしていきます!

// Clipboard APIが使えるかの確認
if(navigator.clipboard){
  return true;
} else {
  return false;
}

先ほどのコピーの時と同じように、表示中のブラウザが「Clipboard API」に対応しているかどうかを判断しています。

// クリップボードにあるテキストを読み込み
navigator.clipboard.readText().then((text) => {
  // 読み込んだテキストを操作
  paste_function(text);
});

ここでは、クリップボードにアクセスして、コピーされている文字列を取得しています。
また、「paste_function(text);」は引数で受け取った関数を実行しています。

この例で実装しているのは、以下のコードですね!

paste_target.value = text;

受け取ったテキストを「textarea」の中に貼り付けています。

コピーのイベントハンドラ

最後にイベントハンドラについて触れていきます。
イベントハンドラを使うことで、ユーザーがテキストをコピーしたときに何かしらの処理を自動で行うことが出来ます。

// コピーイベント
document.addEventListener('copy', () => {
  const result = pasteText((text) => {
    paste_target.innerHTML = text;
  });
});

See the Pen 自動ペースト by カノト (@kanoto) on CodePen.

この例はユーザがテキストをコピーしたときに自動的に「textarea」にペーストされる処理になります。

以上で終わりになります!!
コピー&ペーストを使いこなして、ユーザビリティの高いサイトを作りましょう!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.