HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js)

date

jQueryプラグイン ah-placeholder.js

プラグイン概要



HTML5の仕様にあるplaceholder属性を、未対応のブラウザでも擬似的に使えるようにするjQueryプラグインです。title属性に入れた文字列を、プレースホルダー用のテキストとして扱います。placeholder属性については以下などを参照。

今回のプラグインは、HTML5のplaceholder属性をjQueryでやってみる :: ハブろぐ で、以前書いていたjQueryを整理して、プラグインの体裁に整えてみたものです。車輪の再発明もいいとこですね。

2011-09-09追記 バージョン1.2でplaceholderAttrオプションを追加

これまでplaceholder属性代わりに使う属性がtitleで固定されていましたが,任意の属性に変更できるようにしました.

placeholderAttrに'placeholder'を指定した場合は,placeholder属性に対応しているブラウザではスクリプトによる処理を行わないようになっています.

2011-07-23追記 バージョン1.1でlikeAppleオプションを追加

バージョン1.1から、iOSやSafari5.1以降ライクな、キーダウン&キーアップを基準にした挙動にも対応しました。

Chromeなどのplaceholder
inputにフォーカスした時点で、placeholderのテキストが消えます
iOSやSafari5.1以降のplaceholder
フォーカス後にテキストを入力し始めた時点で、placehoderのテキストが消えます

ダウンロード

jquery.ah-placeholder.js at master from ahomu's jquery.ah-placeholder - GitHub

上記からファイルをダウンロードして利用してください。右上のDonwloads必要なファイルは「jquery.ah-placeholder.js」単体のみです。使い方はこの下のサンプルコードをご覧ください。

ライセンスはMITとGPLのデュアルライセンスなので、色々とご自由にどうぞ。

更新履歴

バージョン1.2
placeholderAttrオプションを追加
バージョン1.1
likeAppleオプションを追加
バージョン1.0
公開

プラグインの使用方法

サンプルコード

<script src="./js/jquery.ah-placeholder.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function()
{
    $('.jq-placeholder').ahPlaceholder({
          placeholderColor : 'silver',
          likeApple : true
     });
});
</script>

<form action="" method="get">
    <input type="text" name="string" value="" title="プレースホルダーテキスト" class="jq-placeholder" />
    <input type="submit" name="submit" value="送信" />
</form>

スクリプトを読み込んだら、サンプルのようにして$(selector).ahPlaceholderで初期化します。placeholderColorオプションで、プレースホルダーになるテキストの文字色を指定できます。(無指定時はsilver)

likeAppleオプションが有効な場合は、キーダウン&キープレスに反応してplaceholderテキストが制御されるようになります。

参考サイト

いろいろ参考にしています

jQuery Pluginにするにあたって

お作法が色々あるようで、お世話になりました。すべてのお作法を踏襲は仕切れてないですが...汗

テキストボックスの制御について

蛇足と反省

そもそもplaceholderの役割的に、古いブラウザでは切り捨てられてしまってもいい程度の入力サポートかなぁ?という疑問があり、スクリプトを入れるのは冗長では?という思いがあります。placeholderがないと入力に不便するようなインタフェイスだとしたら、それは直すべき別の根本的な欠陥でしょう。

スクリプトで解決するにしても、ネイティブにplaceholder属性に対応しているブラウザはそちらを適用して、placeholderを利用できないブラウザにだけスクリプトの効果を適用する、というアプローチにすべきだったと反省。



barchartPopular

rssRecently