Mach3.laBlog

HTML5のplaceholderのようにガイドテキストを表示するjQueryプラグイン

この記事は賞味期限切れです。(更新から1年が経過しています)

HTML5でフォーム関連の要素は色々と刷新されて便利になりそうですが、
その新機能のひとつに、ガイドテキストをうっすら表示させるplaceholderなる物があります。
今日はそのplaceholderをjQueryで表示させてみるちいさな実験。

HTML5のplaceholderのようにガイドテキストを表示するjQueryプラグイン

placeholderについて

何も入力されていないテキストインプットに、
例えば「名前を入力してください」的なガイドテキストを薄く表示させる為の属性。
IEをのぞく多くのモダンブラウザでは既に実装されています。

ちなみにこんなやつです。↓

何を入力したらいいのかがわかりやすい!

こちらのリンク先では、フォームエレメントにかかわる新機能の
各ブラウザの対応状況が紹介されていました。
IE9があまりにも残念で私は悲しい。

JavaScriptで実装してみる

どのブラウザでも使えるようにするために、JavaScriptで実装してみます。
仕組みはシンプルに。

  1. placeholder属性のかわりにdata-placeholder属性でガイドテキストの値を設定する
  2. blurの時にvalueが空っぽだったらdata-placeholderの内容に差し替える
  3. focusの時にvalueがdata-placeholderの内容と同じ場合は空っぽにする
  4. ガイドテキスト表示時のCSSクラスを用意する

作ってみたもの

ソース

mach3/js-jquery-placeholder – GitHub

デモ

jquery.placeholder.js – jsdo.it – Share JavaScript, HTML5 and CSS

使い方

HTML

<input type="text" value="" data-placeholder="Input your name" class="mytext" />

data-placeholder属性に表示させたいガイドテキストを入力します。

CSS

.jquery-placeholder {
    color:#cccccc;
}

ガイドテキスト表示時のスタイルを設定。
初期設定では、jquery-placeholderクラスとなります。
JavaScriptのオプションで変更できます。

JavaScript

$("input.mytext").placeholder();

クラスの設定を変更したい場合は、文字列またはオブジェクトで引数を渡します。

$("input.mytext").placeholder({
    defaultClass : "myclass"
});
// または
$("input.mytext").placeholder( "myclass" );

注意事項

(2011/03/31 18:20 追記)

このスクリプトですが、いくつか問題があります。

  1. アラートでblurイベントがスルーされる
  2. 送信時に値をクリアしないとplaceholderの値を送ってしまう

2番目の問題については、つい先ほどオプション「resetOnSubmit」を追加しました。
これをtrueにするとsubmit時にplaceholderの値から変わってない場合は値をクリアします。
なぜわざわざオプションにしたのかというと、
Ajaxとかでフォームを使いたい時にクリアしないほうが都合がいいケースもあるかな?と。

1番目はちょっと調査+考え中…。

まとめ

IEが最新版の9でも対応してないというのは若干ショックではありますが、
見た目的にも使い勝手的にも取り入れたい表現ですね。


2011/3/31 18:20
オプションの追加、注意事項追記

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*