サイトのUI（ユーザーインターフェイス）向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。
バックスペースで1文字ずつ削除する手間を省くことができます。
作りたいもの
↓テキストボックスがフォーカスされた時に下記のように全選択されるようにしたい。
これはjQueryで簡単に実現できます。
HTML側（テキストボックスのフォーカス時にテキストを全選択）
|
1 2 3 4 5 6 7 8 |
<div class="container"> <div class="row centered"> <input type="text" /> </div> <div class="row"> <input type="text" /> </div> </div> |
色々と書いていますが、inputタグの行さえあればOKですよ！
スクリプト側（テキストボックスのフォーカス時にテキストを全選択）
|
1 2 3 4 5 |
$(function(){ $('input[type="text"]').focus(function(){ $(this).select(); }); }); |
2行目：inputタグがフォーカスになった時に実行される処理という意味です。
3行目：フォーカスされたinputの内容を「select」という関数で「全選択」します。
これでテキストボックスがフォーカスになった時に内容が全選択されるようになりましたね。
サンプルも作成しています。
