*

フォーム関連のイベント処理

公開日: : 最終更新日:2015/08/03 jQuery ,

フォーカスを感知する focus()

focus()は、input要素などのフォーム部品が
マウスやタブキーによって選択された状態(フォーカス状態)に
なったことを感知して、設定された処理を実行します。

他のイベントと同様に、括弧内にfunction(){…}を使い、
そのなかに処理したい内容をかきます。

input要素のvalue属性の値をval()で書き換て、
「入力してください」というテキストを緑色に表示します。
ユーザーがinput要素をフォーカスすると、value属性の値が空に
なって、テキストは削除されます。同時にinput要素のCSSを
操作して、文字の色を今回は赤色に変更しています。

sampleForm02

サンプルコードのコメントアウトされている箇所(22行目~25行目)は
input要素がフォーカスされるたびにフォームの空にする処理が
実行されるため、ユーザーが一度入力した内容が削除されてしまいます。

実際につかうとなると、イベント発生時に一度だけ処理する
one()イベントを使用しfocusイベントが発生した初回のみ処理を
実行した方がよいかと思います。(27行目~30行目)

実行結果はこちらです。

スポンサードリンク

関連記事

catejQuery

非表示の要素を表示する show()

show()は、CSSのdisplayプロパティの値が「none」、 非表示のHTML要素を、アニ

記事を読む

jQuery

Masonryのギャラリーにフィルター機能を追加する

Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギ

記事を読む

catejQuery

ボタンを回転させて表示する。

ブラウザの上部からぶら下がっているボタンです。スクロールが停止した後、一定時間おいて回転しながら現れ

記事を読む

catejQuery

処理のタイミングを決めるイベントについて

jQueryを使ったコードは、セレクターで特定の HTML要素を指定して、CSSやHTMLを変更・

記事を読む

jQuery

マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。

記事を読む

jQuery

タブを作成して、空間を最大限に使う

今回はパネルを使って、複数のコンテンツを1つのエリアに配置して、ブラウザ上部に設けたタブをクリックす

記事を読む

catejQuery

イベントが発生した要素を取得する

イベントを設定したい要素はひとつとは限らない場合が 多々あります。 今回は、eqセレクターを

記事を読む

catejQuery

表示中の要素を非表示にする hide()

hide()は、show()の逆の命令です。 表示されている状態(display:block)のH

記事を読む

catejQuery

jQueryのセレクター2 eq/lt/gt/headerセレクター

前回に引き続きjQuery独自の セレクターについて紹介します。 eq/lt/gtセレクター

記事を読む

catejQuery

テキストの取得・変更

HTMLファイルに含まれるテキストをjQueryで 取得・変更するには、text()という命令を使

記事を読む

スポンサードリンク

Message

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

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑