Tweetカテゴリ:jQueryタグ:javascriptjqueryFORMフォーム以前にご紹介した「jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト」それを使って、今行っている案件をこなそうと思ったら、3つ程改良したい部分が出てきた。一つ目はあらかじめ文字を出現させていて、そのままsubmitされた場合、デフォルトの文字のままだった場合、それを削除するというもの。以前入力していたのをあらかじめ表示させておくなどをした場合、デフォルトの文字を表示させないようにするというもの。3つめは単純、フォーカスがあった部分の背景の色を変えて、入力している部分がわかるようにするもの。以上3点を加えたものを作ってみた。addjQuery1.2〜1.2.6までは今回の方法でも動作しますが、1.3以降のバージョンでは、ボタンクリック時にうまく動作しなくなっています。/>上がvalue未セット、下がセット済みのテキストエリアと、submit代わりのボタンを今回配置するサンプルを用意した。下は最初の値を「サンプルテキスト」と入れておいています。必要となるのは、valueに値が入っているかどうか。それはinput[value=""]でフィルターをかけたもので指定をする。});});これも単純なもので、focusがあった場合と、それがなくなった場合のblurの二つを設定すればよい。テキストエリアの色はbackground-colorで変更可能だ。枠の色を変化させたいときはborder-colorでもできる。好みによって変化さてみてほしい。これの別な方法としては、focusでクラスを追加し、blurでクラスを除去する方法もある。CSSでそのクラスに対して装飾しておけば、クラスが追加されたときに適応されるようになる。CSSの指定が多い場合などはそちらの方が都合がいいかもしれない。指定の値が入っていた場合に空にするというもの。用途などで臨機応変に変化を今回のは応用というより機能追加ができるかがポイント。必要なことは何かを考えて自分で設定を増やして欲しい。[必須入力]※画像の中の文字を半角で入力してください。