あんまり技術系の記事ばっかり続けるのも気が引けるんだけど・・・。
ユーザーがコピーする内容をテキストエリア/テキストボックスで表示したとき、クリックしてフォーカスした際にテキストが全選択状態になると便利だ(特に内容が収まりきらない場合)。
Firefox / Opera / IE だと
onfocus="document.form_name.textarea_name.select();"
または
onfocus="this.select();"
で問題なく実現できるのだが、Safari / Chrome (ようはWebkit) だと、うまくいかない。
これで試してみてほしい。
挙動をよく見てみると、マウスのボタンを押す→全選択される→マウスのボタンを離す→選択が解除され、カーソル位置にキャレットが移動する、となる。つまりこういうことになってるものと思われる。
- Firefox / IE / Opera
→マウスのボタンが押され、離れた時点で、キャレット移動→onfocusイベント実行 - Safari / Chrome
→マウスのボタンが押された時点でonfocusイベント、離れたらキャレット移動
じゃあ、どうすればいいかといえば、キャレット移動が終わってから選択するようにすればいい。
onfocus="setTimeout(function(){document.form_name.textarea_name.select()},0);"
setTimeoutを利用して、0ミリ秒後に選択している。
一応、これで Firefox / Opera / IE でも Chrome / Safari でも動く。Firefox だとフォーカスする→フォーカスはずす→もっかいフォーカスすると、なぜか選択が解除されちゃうけど、まあ、これくらいはいいかな。
