読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

HTML5のinput type="date"のplaceholderがiOSでは効かない

html5 mobile

スマートフォンなら、HTML5に対応しているからいいよね!IEとか考えないからいいよね!
と思っていた時期が僕にもありました。ありません。
iPhoneiPad向けのアプリを作っていて、日付を入力させたい場合ってありますよね。そんな時には、HTML5で新しく追加されたinput要素でtype属性をdateにすると素敵なんだぜ!
うん、日付の入力がとても楽になりますよね。tpye属性をtextにしておくとソフトウェアキーボードで入力しなければならないですから。
でも、画面が狭いので、何を入力させたいかは、placeholderを使って教えたい。でも、iOSでは出来ないらしい。iOS5で試してみましたが、type属性がdateだとplaceholderが効きません。textであれば大丈夫でした。因みに、iOS4.3だとtype="date"がそもそも対応していません。
色々ゴニョってみたいのですが、期待する動きになりませんでした。
ムムム。
エライ人がなければ作ればいいのよ。と言ったとか言わないとか聞きましたので、無理やり実装してみることにしました。
考え方は、重ねればいいんじゃね?です。普通のテキストをplaceholderっぽい色にして、input要素に重ね合わせる方法です。そして、値が入っている場合とフォーカスが当たっている場合には、隠してあげればいいのですね。
今回はjQueryMobileを使ってやっていますので、サイズとかはjQueryMobileのデフォルトCSSの大きさです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>サンプル</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script>
(function() {
	$(document).on('pageinit', '#index', function(ev) {
		$('input[type=date]').on('focus', function() {
			$('#placeholder').hide();
		}).on('blur', function() {
			var val = $(this).val();
			if (!val) {
				$('#placeholder').show();
			}
		});
	});
})();
    </script>
    <script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
    <style>
body {
    background-color: #ffffff;
}
#area {
    position: relative;
    height: 30px;
}
#placeholder {
    position: absolute;
    color: #999999;
    top: 14px;
    left: 10px;
}
#input {
    position: absolute;
}
#input input {
    background-color: transparent;
}
    </style>
  </head>
  <body>
    <section data-role="page" id="index">
      <header data-role="header">
        <h1>サンプル</h1>
      </header>
      <div data-role="content">
        <div id="area">
          <div id="placeholder">yyyy/mm/dd</div>
          <div id="input"><input type="date" name="date" /></div>
        </div>
      </div>
    </section>
  </body>
</html>

で、実際に動かしてみた結果はこんな感じになりました。めでたしめでたし。