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

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

イメージ

テキストフィールドの入力欄に「キーワードを入力してください」とかデフォルトで入れておいて、フォーカスした時に消す、というインターフェースを簡単に実装する 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 には、背景画像やスタイルシートを使ったサンプルもあります。

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

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ