Safari onfocus イベントで select してテキストを選択する方法 (改善案)

テキストボックスにフォーカスが移ったとき、そのテキストを選択するという、次のような JavaScript コードはよく見かけますが、onfocus イベントの中で select メソッドを使うという方法だと、Safari 3 では期待どおり動作してくれません。

テキストを編集しようとしてクリックすると、一瞬そのテキストが選択されますが、すぐに選択が解除されてしまいます。ただ例外もあって、タブキーでフォーカスが移ったときは、期待どおり選択され、解除されることはありません。う～む。

<form id="f">
<input id="c" type="text" name="c" value="160-0021" />
<input type="submit" />
</form>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {

$('#c')
  .focus(function() {
    $(this).select();
  });

}); //jQuery
//]]>
</script>

select メソッドは onfocus イベントが完了してから適用しないとダメのようです。ですので、次のように setTimeout 関数を使って、select メソッドの適用を遅らせてみたところ、期待どおり動作するようになりました。

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {

$('#c')
  .focus(function() {
    var self = this;
    setTimeout(function() {
     $(self).select();
    }, 10); // Safari
  });

}); //jQuery
//]]>
</script>

理論上は onfocus イベントの中で select メソッドを適用していないので、そのタイミングによる副作用があること(ありそう)ですが、他のブラウザも含めて試行していますが、今のところ不都合は見つかっていません。

[すぐにできる!] iLife'08 村上 弘子 白瀧 由裕 井村 克也 by G-Tools