アークウェブシステム開発SandBox

• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript/placeholderをJavaScriptで実装する へ行く。
• JavaScript/placeholderをJavaScriptで実装する の差分を削除

 ** 目次 [#hba57952]
 
 - [[概要>#hbace0101]]
 -- [[HTML5のplaceholder>#hbace0102]]
 -- [[ここで問題が…>#hbace0103]]
 -- [[JavaScriptのplaceholderライブラリ>#hbace0104]]
 - [[JavaScriptのplaceholderライブラリ＋微カスタマイズ>#hbace0201]]
 -- [[プログラム>#hbace0202]]
 -- [[検証ブラウザ>#hbace0203]]
 -- [[微カスタマイズの内容>#hbace0204]]
 -- [[使い方>#hbace0205]]
 -- [[もっかいプログラムについて>#hbace0206]]
 
 
 ** 概要 [#hbace0101]
 
 *** HTML5のplaceholder [#hbace0102]
 
 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
 
 #ref(html5_ver.jpg);
 
 *** ここで問題が… [#hbace0103]
 
 SIZE(18){''でも、ちょっと待ってください！''}
 
 COLOR(red){''IE8/IE7 で表示すると、placeholderは効きません。''}
 
 …どうするか、というとJavaScriptで実装すればいいじゃなイカ！
 
 *** JavaScriptのplaceholderライブラリ [#hbace0104]
 
 JavaScriptでplaceholderを実装しているライブラリを探してきました。
 
 - ahomuさんの『[[HTML5のplaceholder属性をjQueryでやってみる>http://havelog.ayumusato.com/develop/javascript/entry-86.html]]』より、
 実装がシンプルなのでこちらを利用することにしました。
 
 - はてブのコメントに書きましたが、
 defaultColorの他にrequiredColorってのを付けて、hasClass("required")だったらrequiredColorにすると尚良さそう。 
 
 …というわけで、やってみました。
 
 
 ** JavaScriptのplaceholderライブラリ＋微カスタマイズ [#hbace0201]
 
 ▼完成イメージ＆動作確認は下記参照。
 http://okra.ark-web.jp/~takemura/public/js/placeholder/
 
 #ref(javascript_ver.jpg);
 
 
 *** プログラム [#hbace0202]
 
 GitHubからforkしまして、下記にソース一式を置いてあります。
 https://github.com/tiadeen2/jquery.ah-placeholder
 
 ライセンスは、MITとGPLのデュアルライセンスです。
 
 #blikimore()
 
 *** 検証ブラウザ [#hbace0203]
 
 下記のブラウザで動作を確認済みです。
 
 - WindowsXP IE6
 - WindowsXP IE7
 - WindowsXP IE8
 - WindowsVista IE9
 - WindowsXP FireFox5
 - WindowsXP Chrome12
 - Mac OS10.6 Safari5
 
 
 *** 微カスタマイズの内容 [#hbace0204]
 
 以下について、微カスタマイズしました。
 
 - オプションに必須カラーを追加
 - Firefoxなどで入力し始めた時に、CSSの色を取ってこれていないようだったのを改修
 
 
 *** 使い方 [#hbace0205]
 
 細かい仕様は[[ahomuさんの元記事参照>http://havelog.ayumusato.com/develop/javascript/e189-jquery-plugin-placeholder.html]]
 
  $(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を指定しない。
 
 
 *** もっかいプログラムについて [#hbace0206]
 
 下記にソース一式を置いてあります。
 https://github.com/tiadeen2/jquery.ah-placeholder
 
 ライセンスは、MITとGPLのデュアルライセンスです。
 
 
 #blikifooter(竹村)
 
 ----
 tag:[[JavaScript>tag/JavaScript]], [[HTML5>tag/HTML5]]