JavaScript/placeholderをJavaScriptで実装する http://www.ark-web.jp/sandbox/wiki/7890.html

[edit]

目次

[edit]

概要

[edit]

HTML5のplaceholder

HTML5のplaceholderを実運用で利用する話があり、下記のように簡単に実装できて
HTML5はスバラシイな、と思っていました。

<form action="submit_test.php" method="get">
<p>住所:
<ul>
<li>都道府県 <span>(必須)</span> 例:東京都<br />
<input type="text" name="address1" value="" placeholder="都道府県をご入力ください。" /></li>
<li>市区町村 <span>(必須)</span> 例:中央区<br />
<input type="text" name="address2" value="" placeholder="市区町村名をご入力ください。" /></li>
<li>町名・番地 <span>(必須)</span> 例:銀座 1-250-999<br />
<input type="text" name="address3" value="" placeholder="町名と番地をご入力ください。" /></li>
<li>ビル名・マンション名 例:ナントカ本命ビル 7F<br />
<input type="text" name="address4" value="" placeholder="もしビル名等がないようでしたら必要ございません。" /></li>
</ul>
</p>
<input type="submit" name="submit" value="送信" />
</form>

▼完成イメージ&動作確認は下記参照。
http://okra.ark-web.jp/~takemura/public/js/placeholder/html5_placehoder.html

html5_ver.jpg
[edit]

ここで問題が…

でも、ちょっと待ってください!

IE8/IE7 で表示すると、placeholderは効きません。

…どうするか、というとJavaScriptで実装すればいいじゃなイカ!

[edit]

JavaScriptのplaceholderライブラリ

JavaScriptでplaceholderを実装しているライブラリを探してきました。

…というわけで、やってみました。

[edit]

JavaScriptのplaceholderライブラリ+微カスタマイズ

▼完成イメージ&動作確認は下記参照。
http://okra.ark-web.jp/~takemura/public/js/placeholder/

javascript_ver.jpg
[edit]

プログラム

GitHubからforkしまして、下記にソース一式を置いてあります。
https://github.com/tiadeen2/jquery.ah-placeholder

ライセンスは、MITとGPLのデュアルライセンスです。

[edit]

検証ブラウザ

下記のブラウザで動作を確認済みです。

[edit]

微カスタマイズの内容

以下について、微カスタマイズしました。

[edit]

使い方

細かい仕様はahomuさんの元記事参照

$(document).ready(function() {
    $('.jq-placeholder').ahPlaceholder({
        placeholderColor : 'darkgray',
        necessaryColor   : 'palevioletred'  // ←必須カラーを指定できるようになった!
    });
});
$(window).unload(function(){}); // ←この設定をしておかないと、history.backなどで戻った時に ready が実行されなくなる。

 :

&lt;input type="text" name="address1" value="" title="都道府県をご入力ください。" class="jq-placeholder necessary" /&gt;
&lt;input type="text" name="address4" value="" title="もしビル名等がないようでしたら必要ございません。" class="jq-placeholder" /&gt;

↑必須カラーにしたい場合は、classに necessary を追加する。必須にしない場合は、necessaryを指定しない。
[edit]

もっかいプログラムについて

下記にソース一式を置いてあります。
https://github.com/tiadeen2/jquery.ah-placeholder

ライセンスは、MITとGPLのデュアルライセンスです。

投稿者竹村 | パーマリンク

| append.gif

tag:JavaScript, HTML5?


添付ファイル: filejavascript_ver.jpg 2214件 [詳細] filehtml5_ver.jpg 2173件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-07-07 (木) 12:18:57 (2207d)

アークウェブのサービスやソリューションはこちら