HOMEビジネス 【HTML5 & jQuery】iPhone / Android入力フォームの制御方法

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法

casemobile公式

2014/03/20(最終更新日:2014/03/20)


このエントリーをはてなブックマークに追加

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 1番目の画像
 iPhoneとAndroidでは入力フォームの仕様・タグの対応状況に違いがあります。そこで、実際に実機で検証してみました。※端末に搭載された標準ブラウザーで検証を行っています。

入力フォームにプレースホルダーを表示する

 HTML5から実装された「placeholder=”"」を使います。これは、入力フォームに予め文字を表示させておくタグです。HTML5に対応していないブラウザでは、Javascriptで制御したりと面倒だったプレースホルダーですが、「placeholder=”文字列”」と書くだけで実装できてしまいます。
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 2番目の画像
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 3番目の画像

対応状況

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 4番目の画像

入力モードを指定・制限する

 これ、とってもやりたいことの一つだと思います。例えば、「数字しか入力できない」であるとか「英語しか入力できない」とかです。(携帯電話のタグにあった「istyle」のような設定です。)さらにソフトウェアキーボードを適切なものが表示させたい!という要望もあるかと思います。

 ですが…結論を先に申し上げますと、スマートフォンで入力モードをきちんと制限することはできません。数字入力だけは制御できたので、それだけご紹介します。

数字を入力させたい

 本来の使い道から少しそれてしまうのですが、type属性に「tel」を指定します。こうすることでタップした際に表示されるキーボードがテンキーになり、テンキーと一部の記号以外(*や#など)は選択できなくなります。type属性には「number」という値もあるのですが、この場合だとテンキーは表示されません。
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 5番目の画像
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 6番目の画像
 半角英数を入力(最初に英語キーボードを表示させたい)することは出来ない。type属性に「mail」や「url」を設定すればいけるのではないかと思って試してみたのですが、直前に使っていたキーボードや日本語キーボードが表示されてしまいます。他にも考えついたものは検証してみたのですが、残念ながら、最初に英語キーボードを表示させるといったような制御は実装できませんでした。

テキストエリアの文字数制限を設定する

 テキストエリア(textarea)と言えば、maxlength属性をサポートしていないため、最大文字数を設定する事ができません…というのが常識でしたが、HTML5からはサポートしています。
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 7番目の画像

対応状況

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 8番目の画像

オートコレクト機能をオフにする

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 9番目の画像
 文字を入力しているときに出てくる候補機能のことです。これをOFFにするには「autocorrect」属性を使用します。これはiOSの独自拡張機能です。
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 10番目の画像

対応状況

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 11番目の画像

一番最初の文字を大文字にしない

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 12番目の画像
 英数キーボードの場合、最初に入力する文字が大文字になってしまいます。これを小文字から始まるようにするには「autocapitalize」属性を使用します。これはiOSの独自拡張機能です。
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 13番目の画像

対応状況

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 14番目の画像

jQuery:文字を入力するごとにイベントを取得する

 jQueryのkeydownイベントを使います。(その他に「keypress」「keyup」といったイベントも存在します)
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 15番目の画像

対応状況

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 16番目の画像

jQuery:フォームの内容が変更されたかどうかを取得する

 keydownイベントでは、1文字入力するごとにイベントが発生しますが、入力を終えてフォーカスを外した後に処理をしたい場合は、changeイベントを使用します。

changeイベントは通常、フォーカスを失った状態のinput要素がフォーカスを得て、値の変更を完了した時に実行されます。

出典: change() - jQuery 日本語リファレンス
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 17番目の画像

対応状況

【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 18番目の画像

まとめと参考サイト

 やはり、iPhoneとAndroidでは対応状況に違いがあります。iPhoneの場合だと上でご紹介した制御以外にもtypeに「date」や「time」を指定する事でドラム式の選択方式を表示させる事も出来ます。
【HTML5 & jQuery】iPhone / Android入力フォームの制御方法 19番目の画像
 この「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(協定世界時)による日時

出典: フォーム機能の拡張-HTML5リファレンス - HTMLクイックリファレンス
※詳しい情報はこちらが参考になります。

※追加情報


hatenaはてブ


この記事の関連キーワード