CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成!

04

09月2009年

[jQuery]フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す

sakai 23:54 PM

イメージ

テキストフィールドの入力欄に「キーワードを入力してください」とかデフォルトで入れておいて、フォーカスした時に消す、というインターフェースを簡単に実装する jQuery のプラグインをご紹介します。

導入はとても簡単です。

まずは上記のサイトから「jquery.fieldtag.js」をダウンロード。

次に HTML の head 内に以下のコードを。#hoge のところは適用したいテキストフィールドの id を入れます。

<script type="text/javascript" src="jquery.fieldtag.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
  $("#hoge").fieldtag();
});
/* ]]> */
</script>

テキストフィールドの title 属性にデフォルトで表示しておきたい文字列を入れておきます。

<input id="hoge" type="text" title="キーワードを入力してください" />

以上で完了です。(注:jQuery のプラグインのため、jQuery も必要です)

DEMO には、背景画像やスタイルシートを使ったサンプルもあります。

ただ、ご紹介しておいてなんですが、ブラウザをリロードするとちょっと挙動が怪しくなるような気もします。
実際、プラグインの配布サイトにもそのようなコメントがついていますが、作者曰く「バグじゃなくてブラウザの仕様ダゼ(意訳)」とのことです。

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/1993
###はmt-tb.cgiに変更してください。

Cyokodog::Diary - [jQuery][CSS]inline-block を使ってプレースホルダ付き入力欄を実装する

Cyokodog::Diary

[jQuery][CSS]inline-block を使ってプレースホルダ付き入力欄を実装する
まずプレースホルダ付き入力欄のおさらいですが、 こういうやつの事をいいます。入力欄にカーソルがあたるとナビゲーションメッセージが消え、カーソルがはずれる...
トラックバック時刻
2009年09月08日 09:58

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

特集

  • ステップアップ!CakePHP
  • 作って学ぶjQuery