ホーム > 未分類 > Safari / Chrome でテキストエリアをフォーカス時にテキストを全選択する

Safari / Chrome でテキストエリアをフォーカス時にテキストを全選択する

あんまり技術系の記事ばっかり続けるのも気が引けるんだけど・・・。

ユーザーがコピーする内容をテキストエリア/テキストボックスで表示したとき、クリックしてフォーカスした際にテキストが全選択状態になると便利だ(特に内容が収まりきらない場合)。

Firefox / Opera / IE だと

onfocus="document.form_name.textarea_name.select()";

または

onfocus="this.select()";

で問題なく実現できるのだが、Safari / Chrome (ようはWebkit) だと、うまくいかない。

これで試してみてほしい。

挙動をよく見てみると、マウスのボタンを押す→全選択される→マウスのボタンを離す→選択が解除され、カーソル位置にキャレットが移動する、となる。

つまりこういうことになってるものと思われる。

じゃあ、どうすればいいかといえば、キャレット移動が終わってから選択するようにすればいい。

onfocus="setTimeout(function(){document.form_name.textarea_name.select()},0);"

setTimeoutを利用して、0ミリ秒後に選択している。

一応、これで Firefox / Opera / IE でも Chrome / Safari でも動く。Firefox だとフォーカスする→フォーカスはずす→もっかいフォーカスすると、なぜか選択が解除されちゃうけど、まあ、これくらいはいいかな。

コメント:1

kassyi 2009年12月12日: 助かりました。chomeだと選択できないばかりか、フォーカスを当てる度に選択が強制的に外されるのでうぜーと思ってましたが、この情報で解決しました。

pingback - 開発日々の走り書き? | ChromeとSafariで「this.select()」における自動選択ができない問題より 2011年9月18日: [...] — ★参考URL 　・[情報と音楽] Safari / Chrome でテキストエリアをフォーカス時にテキストを全選択する [...]

ホーム > 未分類 > Safari / Chrome でテキストエリアをフォーカス時にテキストを全選択する

検索

Author: labocho