04

09月2009年

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

sakai 23:54 PM

  • はてなブックマークに登録
  • livedoorクリップに登録
  • Yahoo!ブックマークに登録
  • deliciousに追加

イメージ

テキストフィールドの入力欄に「キーワードを入力してください」とかデフォルトで入れておいて、フォーカスした時に消す、というインターフェースを簡単に実装する 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

RECENT COMMENTS

toyama on 【Fireworks】あなたのワークスペース、どんなレイアウト?
> maki さん コメントありがとうございます。 レイヤー
maki on 【Fireworks】あなたのワークスペース、どんなレイアウト?
初期設定のまま、パネル1列で作業してました。。 今までレイヤ
tomo on [使える CSS テクニック] CSSで実現するプルダウンメニュー
sakai様 早速ご返答ありがとうございます。 子供がho
sakai on [使える CSS テクニック] CSSで実現するプルダウンメニュー
>RodMond さん コメントありがとうございます。 自
RodMond on [使える CSS テクニック] CSSで実現するプルダウンメニュー
すみません解決しました(汗) ゴーストを覚えられていたみた