jQuery Mobile逆引きリファレンス
Textinputウィジェットでテキスト入力ボックスを設置するには？
jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
フォームそのもののマークアップと同じく、テキスト入力ボックスの設置にも特別なマークアップは不要です。標準的な<input>／<textarea>要素を配置するだけで、あとはjQuery Mobileが内部的に、角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれます。より正確には、テキストボックスに対してTextinputウィジェットを適用しているのです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<form method="POST" action="">
<!--クリアボタン付きのテキストボックス-->
<div class="ui-field-contain">
<label for="entry_name">名前：</label>
<input id="entry_name" name="entry_name" type="text"
data-clear-btn="true" data-clear-btn-text="クリア" />
</div>
<!--「type="date"」属性による日付入力ボックス-->
<div class="ui-field-contain">
<label for="entry_birth">誕生日：</label>
<input id="entry_birth" name="entry_birth" type="date" />
</div>
<!--複数行入力のためのテキストエリア-->
<div class="ui-field-contain">
<label for="entry_memo">自由記入欄：</label>
<textarea id="entry_memo" name="entry_memo"></textarea>
</div>
<!--検索ボックス（虫眼鏡アイコンを付与）-->
<div class="ui-field-contain">
<label for="entry_keywd">検索キーワード：</label>
<input id="entry_keywd" name="entry_keywd" type="search" />
</div>
<input type="submit" value="送信" />
</form>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
以下に、主なポイントを解説します。
（1）<input>要素で利用できるtype属性
<input>要素のtype属性では、汎用的なテキストを入力するためのtextをはじめ、HTML5で利用できる全ての値を利用できます。具体的には、以下の値です。
| 設定値 | 用途 |
|---|---|
| text | 汎用的なテキスト入力 |
| password | パスワードの入力 |
| number | 数値の入力 |
| range | 範囲のある数値の入力 |
| datetime／datetime-local | 日付／時刻の入力 |
| date | 日付の入力 |
| month | 月の入力 |
| week | 週の入力 |
| time | 時刻の入力 |
| color | 色の選択 |
| search | 検索キーワードの入力 |
| メールアドレスの入力 | |
| tel | 電話番号の入力 |
| url | URLの入力 |
もっとも、jQuery Mobileでは、search、range型を除いては特別な機能を付与せず*1、クライアントの実装に委ねています。例えばnumberの場合、デスクトップ版のChromeでは数値を前後させるためのスピナーを付与しますが、Androidの標準ブラウザーでは標準的なテキストボックスを表示します（次の画面を参照）。ただし、テキストボックスにフォーカスすると、数値入力に適したソフトウェアキーボードを有効にします。その他の入力型（type）の場合も同様です。
入力効率を向上するという意味で、type属性に適切な型を指定することは重要です。
- *1 searchは本稿後半で、rangeは別稿で解説の予定です。
（2）クリアボタンを設置する
data-clear-btn属性を設置することで、テキストボックスの内容をクリアするための
ボタンを設置できます。data-clear-btn-text属性で指定されたテキストは、スクリーンリーダーなどの環境で利用されるほか、クリアボタンにマウスを当てたときのポップアップテキストとして使用されます。
なお、クリアボタンは<input>要素に対してのみ適用されます（<textarea>要素には適用されません）。
（3）「type="search"」の場合
「type="search"」属性が指定された<input>要素では、jQuery Mobileは虫眼鏡アイコン付きのテキストボックスを自動生成します。これはTextinputウィジェットによって動的に処理されたもので、ブラウザー環境によらず、同じ見掛けとなります。
（4）テキストエリアは<textarea>要素で表す
<textarea>要素で生成されたテキストエリアには、Textinputウィジェットによって自動拡張機能が付与されます。自動拡張機能とは、テキスト入力によって欄が不足すると、動的に縦幅を広げる機能のことです。
もしもこの機能を無効にしたい場合には、<textarea>要素に対して「data-autogrow="false"」属性を付与してください。
（5）data-mini属性でコンパクト表示も可
「data-mini="true"」属性を付与することで、縦幅を狭めたコンパクトバージョンのテキストボックスを生成します。Textinputウィジェットだけでなく、Button、Checkboxradio、Flipswitch、Sliderなど、ほとんどのフォーム関連ウィジェットで利用できます。
（6）ネイティブのテキストボックスを表示
もしも別のライブラリを利用しているなどで、jQuery Mobileによるウィジェット適用が邪魔になる場合には、「data-role="none"」属性を指定してください。これによって、ウィジェットの自動適用が解除されます。
「data-role="none"」属性は、テキストボックスだけでなく、チェックボックス／ラジオボタン、選択ボックスなどでも利用できます。
※以下では、本稿の前後を合わせて5回分（第21回～第25回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
21. Selectmenuウィジェットで選択メニューを作成するには？
複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン／チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。
22. jQuery Mobileで入力フォームを設置するには？
jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。
23. 【現在、表示中】≫ Textinputウィジェットでテキスト入力ボックスを設置するには？
jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。
24. ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには？
＜ul＞／＜li＞要素や＜ol＞／＜li＞要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。
25. ListViewウィジェットで階層型リストを作成するには？
初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。
