input,textareaで全文選択し易いJavaScript

フォームのテキストエリアをカーソルでなぞって、コピーするのはちょっと面倒！という時に便利なのが、このJavaScript。マウスオーバーで選択できるものと、領域をクリックすると全てが選択されるものの二種類があります。

マウスオーバーで全文選択されるタイプは、一般のOS操作とちょっとかけ離れる場合もあるので、一般のユーザービリティ用には、テキストエリアをクリックすると全選択されるタイプの方が、迷いがないというか間違えないというか、意外とクリックの方がいいと思います。

ちょうどECサイト何かで複数画像のサムネイルがあって、クリックで拡大するか、マウスオーバーで写真を拡大するかみたいなのに似ていますね。画像拡大の場合もユーザービリティ的には、クリックで拡大の方が一般的というか、普通のユーザーに使ってもらうことを前提のサイトはクリック操作にするべきだというユーザービリティが一般的なようです。クリックもしないのにマウスオーバーで表示が変わったりするのを気嫌うユーザーさんがいるらしいです。自分用であれば、マウスオーバーの方が早くていいですけどね。

クリック全選択の場合
<input onclick=”this.select(0,this.value .length)” size=”20″ type=”text” value=”●●●●●” />

マウスオーバーで全選択の場合
<input onmouseover=”this.select()” size=”20″ type=”text” value=”●●●●●” />