フーノページ

JavaScript : テキストのコピーボタンを実装。

〽️ ボタンがあればユーザに優しい。 〽️ クリップボードとは？　 〽️ select( )とexecCommand( )。 〽️ 任意の文字列をコピーさせたい時。




webサイト制作ついてのまとめページはこちら⬇︎。

ボタンがあればユーザに優しい。

こんにちは、「ふ」です。
ブラウザ上でユーザにテキストをコピーしてもらいたい時ってあると思います。

textarea

PC上であればショートカットキーがあるのでtextareaをクリックして全選択(⌘/Ctrl＋A）、コピー（⌘/Ctrl＋C）でコピーすると思います。
若干の手間ですね・・しかもこれがスマホだとタップ操作のみでチマチマすることとなり、もっとめんどくさいことになる。

ボタンひとつでクリップボードにコピーできるようにすれば、スマホユーザでも簡単に操作してもらえるのでは。

今回はJavaScriptを使って、テキストをコピーするボタンを実装していきたいと思います。










クリップボードとは？

「クリップボード」。ちょっと聞き慣れない言葉かもしれませんのでちょっとここで解説。

「クリップボード」はPCやスマホでみんな使いまくっているものです。「コピペ」操作の時に、一時的にコピーしたものを保存しておく領域のことを指します。

そのあと別の文章や画像をコピー操作すると、前に保存されていたものは自動的に消去されてしまいます。

普段は意識せずに使っていると思いますが、コピペ操作ができるのもこの「クリップボード」という領域が存在するからなんですね。

　





select()とexecCommand()。

扨（さて）本題に戻りましょう。HTMLにテキストエリアを配置します。

HTML



<button onclick = "copy()"> コピーする </button>


ブラウザ

CSSはテキトーに書いています。リンク作成ツールなどでよく、この手のものを見かけますよね。buttonを押した時に実行される関数名は「copy」としておきました。

クリップボードにテキストをコピーするには前提として、その範囲を選択して編集可能な状態にさせておかなければいけません。

JavaScriptにはtextareaタグの内容を選択する便利なメソッドがあります。

( 取得したtextarea ) .select( );

このselect()メソッドで選択ができたら、クリップボードにコピーさせるには次のように記述します。

document.execCommand("copy");

さっき作ったHTMLに対してこの２つのメソッドを適用してみましょう。関数「copy()」の内容を記述していきます。

JavaScript

function copy() { var text = document.getElementsByTagName("textarea")「「１[0]」」; text.select(); document.execCommand("copy"); }

textarea要素自体の取得は、getElementsByTagName()で取得します。メソッドを実行するとHTMLCollection（ドキュメント内の全てのtextareaタグを配列のようにしたもの）が返されます。
サンプルではtextareaは１つしか書いていないので、Collectionの１番目 [0] を指定しましょう。

完成型。











⬆︎実際に作ったものを貼ってみました。「コピーする」を押して、他の場所にペーストしてみてください。textareaの中身を書き換える事もできます。







任意の文字列をコピーさせたい時。

select()メソッドで文字列を選択状態にできるのはtextareaとinput要素に限られます。では任意の文字列をユーザにコピーしてもらいたいときにはどうすればいいのか。


かくなる上は・・

作ってすぐに消そう。



少し邪道な気もしますが、任意の文字列を記入したtextareaを生成 ▶︎ 一時的にドキュメント上に追加 ▶︎ クリップボードにコピーさせる ▶︎ 用が済んだらtextareaを削除。。というやり方ができます。

例えば以下のp要素の内容をコピーさせたい時。

HTML

これはp要素。任意の文字列だよ

textareaを「作ってコピー、すぐに消す」処理を関数「copy_2」に記述していきます。

JavaScript

function copy_2() { 「「３//p要素の文字列を取得」」 var text = document.getElementById("optional").innerText; 「「３//textareaを生成」」 var area = document.createElement("textarea"); 「「３//p要素の内容をtextareaに記述」」 area.textContent = text; 「「３//生成したものをdocumentに追加」」 document.body.appendChild(area); 「「３//選択/コピーして・・」」 area.select(); document.execCommand("copy"); 「「３//すぐに消す。」」 document.body.removeChild(area); }

こうなりました。



これはp要素。任意のテキストだよ



⬆︎また実際に作ったものを貼りました。この方法を使えば、任意の文字列をユーザ側でコピーしてもらうことができます。

一時的に生成するtextareaの文章は内部的に用意する事もできますが、<p>要素などでブラウザ上にその内容を表示してあげたほうが、ユーザも安心してボタンをクリックできると思います。
「ふ」も実際にこの方法で自サイトにコピー用のテキストを貼っています。皆さんも是非活用してみてください ♫

関連記事

「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。