スポンサーリンク
スポンサーリンク

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

jQuery

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

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

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

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

sampleForm02

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

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

実行結果はこちらです。

コメント

タイトルとURLをコピーしました