iPhoneとAndroidでは入力フォームの仕様・タグの対応状況に違いがあります。そこで、実際に実機で検証してみました。※端末に搭載された標準ブラウザーで検証を行っています。
入力フォームにプレースホルダーを表示する
HTML5から実装された「placeholder=”"」を使います。これは、入力フォームに予め文字を表示させておくタグです。HTML5に対応していないブラウザでは、Javascriptで制御したりと面倒だったプレースホルダーですが、「placeholder=”文字列”」と書くだけで実装できてしまいます。
対応状況
入力モードを指定・制限する
これ、とってもやりたいことの一つだと思います。例えば、「数字しか入力できない」であるとか「英語しか入力できない」とかです。(携帯電話のタグにあった「istyle」のような設定です。)さらにソフトウェアキーボードを適切なものが表示させたい！という要望もあるかと思います。
ですが…結論を先に申し上げますと、スマートフォンで入力モードをきちんと制限することはできません。数字入力だけは制御できたので、それだけご紹介します。
数字を入力させたい
本来の使い道から少しそれてしまうのですが、type属性に「tel」を指定します。こうすることでタップした際に表示されるキーボードがテンキーになり、テンキーと一部の記号以外(*や#など)は選択できなくなります。type属性には「number」という値もあるのですが、この場合だとテンキーは表示されません。
半角英数を入力(最初に英語キーボードを表示させたい)することは出来ない。type属性に「mail」や「url」を設定すればいけるのではないかと思って試してみたのですが、直前に使っていたキーボードや日本語キーボードが表示されてしまいます。他にも考えついたものは検証してみたのですが、残念ながら、最初に英語キーボードを表示させるといったような制御は実装できませんでした。
テキストエリアの文字数制限を設定する
テキストエリア(textarea)と言えば、maxlength属性をサポートしていないため、最大文字数を設定する事ができません…というのが常識でしたが、HTML5からはサポートしています。
対応状況
オートコレクト機能をオフにする
文字を入力しているときに出てくる候補機能のことです。これをOFFにするには「autocorrect」属性を使用します。これはiOSの独自拡張機能です。
対応状況
一番最初の文字を大文字にしない
英数キーボードの場合、最初に入力する文字が大文字になってしまいます。これを小文字から始まるようにするには「autocapitalize」属性を使用します。これはiOSの独自拡張機能です。
対応状況
jQuery:文字を入力するごとにイベントを取得する
jQueryのkeydownイベントを使います。(その他に「keypress」「keyup」といったイベントも存在します)
対応状況
jQuery:フォームの内容が変更されたかどうかを取得する
keydownイベントでは、1文字入力するごとにイベントが発生しますが、入力を終えてフォーカスを外した後に処理をしたい場合は、changeイベントを使用します。
changeイベントは通常、フォーカスを失った状態のinput要素がフォーカスを得て、値の変更を完了した時に実行されます。
対応状況
まとめと参考サイト
やはり、iPhoneとAndroidでは対応状況に違いがあります。iPhoneの場合だと上でご紹介した制御以外にもtypeに「date」や「time」を指定する事でドラム式の選択方式を表示させる事も出来ます。
この「data」や「time」以外にもHTML5から新しく追加されたフォームの属性がいくつかあるので、各スマートフォンのブラウザが対応してくれる日を待ち望むばかりです。
HTML5から追加されたフォームの属性(一部)
input type=”email” …… メールアドレス
input type=”url” …… URL
input type=”search” …… 検索テキスト
input type=”tel” …… 電話番号
input type=”number” …… 数値
input type=”date” …… 日付
input type=”datetime” …… UTC（協定世界時）による日時
※詳しい情報はこちらが参考になります。
※追加情報
（提供： casemobile〜スマホコンテンツ開発ブログ）
はてブU-NOTEをフォローしておすすめ記事を購読しよう