2007-11-29

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[すぐにできる!] iLife'08
村上 弘子 白瀧 由裕 井村 克也

[すぐにできる!] iWork'08 [すぐにできる!] Mac OS X Version10.5 Leopard Macをはじめよう! Mac Basic Guide (アスキームック MacPeople MOOK 18) (アスキームック MacPeople MOOK 18) (アスキームック MacPeople MOOK 18) Mac OS X 10.5 Leopard Perfect Guide (アスキームック MacPeople MOOK 21) Mac Fan iLife '08[iTunes・iPhoto・iMovie・iDVD・GarageBand・iWeb]入門・活用ガイド (MacFanBooks)

by G-Tools

2 件のコメント:

aquilegia さんのコメント...

調べていないので間違えているけもしれませんが、クリックの場合はフォーカスイベントの後にクリックイベントが発生していて、後のクリックが選択をかき消してたりはしないでしょうか。
自信は無いですが…

nakajiman さんのコメント...

なるほど。その可能性が高そうですね。ただ、この振る舞いはあくまでも Safari だけなんですよね。