JavaScript で、クリック時に文字列が選択されるテキストボックス

トラックバックの URL とか、コピーしてほしい情報があるときには、input 要素や textarea 要素をよくこんな風にしますよね。




従来の書き方

これってずっと

<input type="text" value="選択したい文字列" onfocus="this.select();" />

って書くとばかり思っていたんですが、どうやら違うみたいです。

というのは、上記のコードだと Google Chrome で文字列が選択されないから。Google Chrome の人は、次のテキストボックスで試してみてください。




Google Chrome に対応した書き方

それでは、最初に載せたテキストボックス（インプット要素）のように Google Chrome でも選択可能にするにはどうすればいいのかというと…。

<script type="text/javascript"><!--
  function selectTextboxContent(textbox) {
    setTimeout(function() {textbox.select();}, 0);
  }
//--></script>

と関数を定義しておいて

<input type="text" value="選択したい文字列" onfocus="selectTextboxContent(this);" />

っていう感じで使うといいみたいです。ぜひお試しください。
参考：

• html - problem with Chrome form handling: input onfocus="this.select()" - Stack Overflow

jQuery の場合

ちなみに、jQuery で振る舞いを指定したい場合には、次のサイトが参考になるかと思います。

• forked from: forked from: 入力欄を選択状態にさせる - jsdo.it - Share JavaScript, HTML5 and CSS

というか…（追記 2012-01-08）

最後に紹介した jsdo.it のデモを見る限り、

<input type="text" value="選択したい文字列" onclick="this.select();" />

だけでいい気がしてきました。簡単だし。