Android1.6のplaceholder属性でのバグ/Android1.6で「border-radius」を使用するときの注意点
最近、スマートフォン向けのHTMLを書き始めたのですが、placeholder属性と、border-radiusのところで、はまったのでメモしておきます。
Android1.6でのplaceholder属性でのバグ
まず、placehoder属性については、図で見たほうが分かりやすいと思いますので、グリーさんと、モバゲーさんのログイン画面を御覧くださいｍｍ
<input type="text" placeholder="ﾒｰﾙｱﾄﾞﾚｽ" />
御覧いただいたとおり、placeholder属性は、スマフォの小さな画面を節約できる便利な属性です。inputタグ内の「メールアドレス」、「パスワード」っていうグレーの文字のところですね。
ただただしかし、、、
Android1.6だとこのplaceholder属性の挙動がおかしいんです！！
「メールアドレス」とか、「パスワード」というグレーの文字が、inputタグにfocusが当たっても消えずに残ってしまうのですorz
ちなみに、この辺のことは以下に詳しくまとまっております。(スマフォだと以下のスライドは見れないみたいです＞＜）
Android Bazaar and Conference 2011 Winter
View more presentations from gree_tech
文字でまとまっているのは、↓
Android Bazaar and Conference 2011 Winter行ってきました
ちなみに、モバゲーのAndroidブラウザ版は、placeholderのバグのまま使用されておりました。。
＊モバゲーは、Android2.1以上の端末を推奨されておりますのでご注意ください。
ときたま、「メールアドレス」という文字が消えないまま残ってしまいます！！
なんてこった。。
placeholderバグへの対応
バグはこちらではどうしようもないので、Android1.6の場合は、mixiさんのログイン画面のように、inputタグの上に、「メールアドレス」、「パスワード」という説明文を追加するようにします。
１，Javascriptで、userAgentを取得し、Android1.6で場合分けする
window.onload = function() { //Android 1.6の場合 if (navigator.userAgent.match(/Android 1.6/)) { //ここに②の処理を追加 }
２，Android1.6の場合は、placeholderを使わず、上に「メールアドレス」という文言を追加
<div id="mailaddres_description" style="visibility:hidden; height:0px"> ﾒｰﾙｱﾄﾞﾚｽ </div> <div id="mailaddres_input"> <input type="text" placeholder="ﾒｰﾙｱﾄﾞﾚｽ" /> </div>
//Android1.6の場合、以下の処理を追加 //visibilityを"visible"に変更 document.getElementById("mailaddres_description").style.visibility="visible"; //heightを10pxに変更 document.getElementById("mailaddres_description").style.height = "10px"; //placeholder属性をつけないHTMLを追加 document.getElementById("mailaddres_input").innerHTML = '<input type="text" />';
こんなやり方もあるみたいです。
・JavaScript+HTMLのみでテキストボックスのplaceholder実装メモ
→display:none;を使用しているみたいです。
・スマートフォンにおけるHTML5対応状況 (2) input typeについて
→inputタグ全般について詳しく紹介されていて、とても参考になりましたっｍ
同じく、Android1.6で、border-radiusを使用するときの注意点
これはplaceholderほどではないのですが、iPhoneでは動くのに、Androidで動かなかったため、「？？」となり、いろいろ試したのですが、CSSで角丸を作るとき、
border-radius
では、角丸とはならず、
-webkit-border-radius;
としないとダメみたいですね。。
また、丸くした部分のエイリアスが、
以上だと、効かずにじゃぎじゃぎしてしまう現象があるようで、それに対処するには、画像をそのまま表示させる方法しかないようです。。残念すぎる。
