【ホームページ作成】コピーさせたい文字列をコピーしやすくする

フォームを使ってコピーしやすくする

ページの閲覧者に何らかの長い文字列をコピーさせたい場合、単純に文字列をそのまま掲載するよりも、以下のように見せた方が便利かもしれません。

上記の入力フォーム内をクリックしてみて下さい。 おそらく、クリックしただけで文字列全体が範囲選択状態になるでしょう。 閲覧者はそのまま右クリックして「コピー」を選ぶなり、[Ctrl]＋[C]キーを押すなりして簡単に文字列をコピーできます。
※自動で範囲選択されるにはJavaScriptが有効な閲覧環境が必要です。

フォームを使うメリット

閲覧者にコピーさせたい文字列をこのように表示させると、次のようなメリットがあります。

• わざわざマウスを使って細かな範囲選択操作をさせずに済む。
• 前後の余計な文字まで選択してしまうミスを防げ、確実に目的の文字列だけを選択させられる。

入力フォームを使わずに、普通に文章中に含めると以下のようになります。

この場合、閲覧者が番号をコピーするには、「コピーを開始したい文字の直前にマウスポインタを合わせ、コピーしたい範囲の終わりまでドラッグする」というマウス操作などが必要です。 そんな操作を要求するよりは、クリックするだけで適切な範囲が勝手に選択されるようになっている方が閲覧者にとって便利でしょう。

何かの番号や長いURLなど、特定の文字列を閲覧者にコピーさせる必要がある場合は、この掲載方法を使ってみてはいかがでしょうか。
実現方法はとても簡単です。 1行の入力欄を作って、そこにコピーさせたい文字列を入れ、短いJavaScriptを記述するだけです。

簡単コピー用フォームの活用例

ブログのトラックバックURLの表示にこの方法が使われているのをよく見かけます。

トラックバックURLは、リンクしても意味がなく、URLを閲覧者にコピーさせる必要があります。長いURLを閲覧者にマウスで範囲選択させるよりは、上記のようにフォームを使う方が簡単で良いでしょう。

IDやパスワードなどのように、過不足なくコピーしてもらわなければ困るような文字列の掲載にも便利でしょう。 （パスワードの場合、余計な空白文字までコピーしてしまっていても気付きにくいですから）

※IDやパスワードを書いている時点で「秘密」でも何でもありませんが。 検索には引っかかって欲しくないけど閲覧者には見せたいからBASIC認証を使って隠してみたページへの案内……などには使えそうな気がします。

JavaScriptが使えなくても

JavaScriptが使えない環境からの閲覧であっても、「文章中の一部を選択」するよりは、「フォームの中の全部を選択」する方が楽でしょう。 余分な前後の文字を誤って選択してしまう可能性がないからです。

入力欄内にカーソルを入れた上で、

1. [Ctrl]＋[A]を押して全選択
2. [Ctrl]＋[C]を押してコピー

……のような簡単な操作でも過不足無くコピーできます。マウスで細かく範囲選択を要求するよりは便利でしょう。

前置きが長くなりましたが、それでは早速、このようなフォームの作り方をご紹介いたします。

簡単にコピーできるフォームの作り方へ >>