HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js)
Posted: Updated:
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にするにあたって
- jQueryのプラグインの作り方 | Coder's Note
- jQuery pluginの開発規約について | Kinopyo's Blog
- jQueryの$.extendに注意：$.extend({},target,option)と$.extend(target,option)の違い | Kinopyo's Blog
お作法が色々あるようで、お世話になりました。すべてのお作法を踏襲は仕切れてないですが...汗
テキストボックスの制御について
- テキストボックス内のカーソル（キャレット）位置や選択範囲を，JavaScriptで取得・設定する方法 - 主に言語とシステム開発に関して
- テキストボックス内でカーソル位置を移動する方法 - Enjoy*Study
- 選択範囲の取得について調べた - daily dayflower
蛇足と反省
そもそもplaceholderの役割的に、古いブラウザでは切り捨てられてしまってもいい程度の入力サポートかなぁ？という疑問があり、スクリプトを入れるのは冗長では？という思いがあります。placeholderがないと入力に不便するようなインタフェイスだとしたら、それは直すべき別の根本的な欠陥でしょう。
スクリプトで解決するにしても、ネイティブにplaceholder属性に対応しているブラウザはそちらを適用して、placeholderを利用できないブラウザにだけスクリプトの効果を適用する、というアプローチにすべきだったと反省。
