2012-01-07

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);" />

っていう感じで使うといいみたいです。ぜひお試しください。
参考:
jQuery の場合

ちなみに、jQuery で振る舞いを指定したい場合には、次のサイトが参考になるかと思います。
というか…(追記 2012-01-08)

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

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

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

スポンサードリンク:

お願い:
「このエントリ役に立った!」と思ったら、ぜひ フィード 登録をお願いします。 

No comments:

Post a Comment

Comments on Google+:

Zenback - Everyone's Related Posts