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

文字列を簡単にコピーできるフォームを作る

文字列を簡単にコピーさせられるフォームを作るのはとても簡単です。以下のように記述するだけです。（JavaScriptも含んでいます）

たったのこれだけです。（「15」や「文字列」の部分を書き換えて使うだけです。）
これを表示させると、以下のように見えます。

上記の場合、閲覧者がフォームの内容を自由に書き換えられるため、誤ってキーを押してしまうと表示が書き換わってしまいます。 それを防ぎたければ、フォームを読み取り専用にすることもできます。

これを表示させると、以下のように見えます。（フォーム内に表示されている文字列は編集できません。）

以下に、上記ソースの意味を順番に解説します。

文字列を簡単にコピーできるフォームの解説

[STEP.1] 1行入力欄を作り、コピーさせたい文字列を指定

これを表示させると、以下のように見えます。

size属性の値には、フォームの横幅を指定します。 value属性の値には、閲覧者にコピーさせる文字列を記述します。
※後述のスタイルシートで指定する方が細かく幅を調整できます。

[STEP.2] 自動的に文字列を範囲選択するスクリプトを記述

これを表示させると、以下のように見えます。フォームの中をクリックしてみて下さい。全体が範囲選択されるはずです。

「onfocus」属性の中に書いたスクリプトは、その要素にフォーカスが移ったとき（＝クリックされたり[TAB]キーなどで移動してきたとき）に実行されます。
「this.select();」は、その入力欄の中身を選択状態にするスクリプトです。これらはすべて修正せずこのまま書けばOKです。

[STEP.3] （必要であれば）書き込み禁止にする

これを表示させると、以下のように見えます。フォームの中の文字列を閲覧者が修正できなくなっています。

readonly属性を付加すると、選択やコピーはできても、修正や削除はできなくなります。なお、上記のように「readonly」とだけ記述するのはHTMLでの記述方法です。XHTMLの場合は、readonly="readonly" のように記述する必要があります。

以上で完成です。

スタイルシートを活用することで、横幅を細かく指定したり、文字サイズや文字色を指定することもできます。 次のページで各種装飾の方法をご紹介いたします。

フォームを装飾する方法へ >>