JavaScriptで、ある要素をクリップボードにコピーする

私は、今までjavascriptに関してはノータッチでした。
しかし、急にインターン先でjavascriptの仕事がきてやらざるを得なくなりました(笑)
javascriptの何もかもが初めてでとても戸惑いましたが、周囲の方々の協力もあってそのお仕事は解決できました…。
せっかくなので学んだことを備忘録としてここに書いておきたいと思います。

課題

やったこと、それは、
『ボタンをクリックしたときに、ある要素がクリップボードにコピーされるようにする』
ことでした。

jQueryではなく純javascriptで、という注文つきです。

これを実装するためには、いくつかの段階を踏まなくてはなりません。

1. ボタンがクリックされたことを検知する
2. ある要素を取得する
3. 取得したものをクリップボードに入れる
4. 出力されるようにする

順々に整理していきます。

対応

ボタンがクリックされたことを検知する

ここでは、次の関数を使います。

document.getElementById("<id要素>").onclick = function() {
  // ここに#buttonをクリックしたら発生させる処理を記述する
};

document.getElementById()で文書内のid要素を指定して、その要素をクリックした時の処理をfunction( ){ }内に記述します。

ある要素を取得する

ここでは、次の関数を使います。

var <変数> = document.getElementById("<id要素>");

先ほどと同様、id要素を取得したら、それをある変数に代入します。

新しい要素の取得

var element = document.createElement("textarea")

これは新しく要素を作成する関数です。
作成したい要素のタグ名を引数に指定してください。
ここではtextareaとしています。

取得したものをクリップボードに入れる

element.value = <id要素>.dataset.copy_clipboard;

セットされたelementに対して、読み取り専用のプロパティを提供します。

出力する

document.body.appendChild(element)  #要素に値を追加
element.select();  #値を選択する
document.execCommand("copy");  #選択範囲をクリップボードにコピー
document.body.removeChild(element)  #要素から値を削除

初心者なので少し曖昧ですが、これはDOM(Document Object Model)操作というもので、HTML文書をアプリケーションから利用するためのAPIらしいです。

おまけ：ポップアップメッセージ

alert('クリップボードにコピーしました。')

このように書いておくと、これまで述べてきたfunction{}の操作がが実行されたときに、「クリップボードにコピーしました」とポップアップメッセージを表示することができます。

まとめると...

id要素：user_email として、

javascript:
  document.getElementById("user_email").onclick = function(){
    var email = document.getElementById("user_email");
    var text = document.createElement("textarea");
    text.value = email.dataset.copy_clipboard;
    document.body.appendChild(text);
    text.select();
    document.execCommand("copy");
    alert('クリップボードにコピーしました。');
  }

となりました！