スマートフォンなら、HTML5に対応しているからいいよね!IEとか考えないからいいよね!
と思っていた時期が僕にもありました。ありません。
iPhoneやiPad向けのアプリを作っていて、日付を入力させたい場合ってありますよね。そんな時には、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>