*

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

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

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

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

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

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

sampleForm02

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

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

実行結果はこちらです。

スポンサードリンク

関連記事

catejQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの 値を徐々に変更して、独自のアニメーションを作成

記事を読む

jQuery

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

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

記事を読む

jQuery

スライドショーに色々な機能を付けてみた。

詳細はサンプルコードにコメントアウトしました。サンプルコードの実行結果はこちら CSSのサンプ

記事を読む

jQuery

CSSプロパティの設定と値の取得

jQueryで、シンプルにCSSのプロパティの値を設定したり、取得したりできます。CSSを操作すると

記事を読む

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

catejQuery

ストライブテーブルを作成する。

ストライプテーブルとは、1行(列)おきに、異なる色を敷いた テーブルの事です。偶数行(列)、奇数行

記事を読む

catejQuery

フォーカスが外れたことを感知する。

前の記事のfocus()とは逆に、フォーム部品から フォーカスが外れた(選択されていない状態になっ

記事を読む

catejQuery

マウスの動きに合わせて処理を行うmousemove()

この命令は、特定の要素上でマウスカーソルが 動いたときに処理を行います。 mousemove

記事を読む

catejQuery

フォームの内容が変更されたことを感知する

change()は、フォームの内容(フォーム部品の値)が 変更されたことを感知する命令です。

記事を読む

catejQuery

クリックしたことを感知するclick()

click()命令はready()と同様に、括弧内のfunction(){...}と記述し その内

記事を読む

スポンサードリンク

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 ↑