文字列を簡単にコピーできるフォームを作る
文字列を簡単にコピーさせられるフォームを作るのはとても簡単です。以下のように記述するだけです。（JavaScriptも含んでいます）
たったのこれだけです。（「15」や「文字列」の部分を書き換えて使うだけです。）
これを表示させると、以下のように見えます。
上記の場合、閲覧者がフォームの内容を自由に書き換えられるため、誤ってキーを押してしまうと表示が書き換わってしまいます。 それを防ぎたければ、フォームを読み取り専用にすることもできます。
これを表示させると、以下のように見えます。（フォーム内に表示されている文字列は編集できません。）
以下に、上記ソースの意味を順番に解説します。
文字列を簡単にコピーできるフォームの解説
[STEP.1] 1行入力欄を作り、コピーさせたい文字列を指定
これを表示させると、以下のように見えます。
size属性の値には、フォームの横幅を指定します。 value属性の値には、閲覧者にコピーさせる文字列を記述します。
※後述のスタイルシートで指定する方が細かく幅を調整できます。
[STEP.2] 自動的に文字列を範囲選択するスクリプトを記述
これを表示させると、以下のように見えます。フォームの中をクリックしてみて下さい。全体が範囲選択されるはずです。
「onfocus」属性の中に書いたスクリプトは、その要素にフォーカスが移ったとき（＝クリックされたり[TAB]キーなどで移動してきたとき）に実行されます。
「this.select();」は、その入力欄の中身を選択状態にするスクリプトです。これらはすべて修正せずこのまま書けばOKです。
[STEP.3] （必要であれば）書き込み禁止にする
これを表示させると、以下のように見えます。フォームの中の文字列を閲覧者が修正できなくなっています。
readonly属性を付加すると、選択やコピーはできても、修正や削除はできなくなります。なお、上記のように「readonly」とだけ記述するのはHTMLでの記述方法です。XHTMLの場合は、readonly="readonly" のように記述する必要があります。
以上で完成です。
スタイルシートを活用することで、横幅を細かく指定したり、文字サイズや文字色を指定することもできます。 次のページで各種装飾の方法をご紹介いたします。
