クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery テキストボックスのフォーカス時にテキストを全選択

投稿日:2017年11月26日 更新日:

サイトのUI(ユーザーインターフェイス)向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。
バックスペースで1文字ずつ削除する手間を省くことができます。

作りたいもの

↓テキストボックスがフォーカスされた時に下記のように全選択されるようにしたい。

これはjQueryで簡単に実現できます。

HTML側(テキストボックスのフォーカス時にテキストを全選択)

色々と書いていますが、inputタグの行さえあればOKですよ!

スクリプト側(テキストボックスのフォーカス時にテキストを全選択)

2行目:inputタグがフォーカスになった時に実行される処理という意味です。
3行目:フォーカスされたinputの内容を「select」という関数で「全選択」します。

これでテキストボックスがフォーカスになった時に内容が全選択されるようになりましたね。
サンプルも作成しています。

-jQuery

執筆者:

関連記事

jQuery プラグインlazyload.js(画像の遅延読み込み)

スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。 あれは画像の遅延読み込みという事をしているそうです。 ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

jQuery アコーディオンメニューを自作サンプル(slideToggle)

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。 プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。 プラグインから …


comment

メールアドレスが公開されることはありません。