Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

Textinputウィジェットでテキスト入力ボックスを設置するには?

2014年6月19日

jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。

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

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 フォームそのもののマークアップと同じく、テキスト入力ボックスの設置にも特別なマークアップは不要です。標準的な<input>/<textarea>要素を配置するだけで、あとはjQuery Mobileが内部的に、角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれます。より正確には、テキストボックスに対してTextinputウィジェットを適用しているのです。

HTML
<!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>
テキストボックス/テキストエリアを配置したコード(text.html)
さまざまな入力ボックスを表示

 以下に、主なポイントを解説します。

(1)<input>要素で利用できるtype属性

 <input>要素のtype属性では、汎用的なテキストを入力するためのtextをはじめ、HTML5で利用できる全ての値を利用できます。具体的には、以下の値です。

設定値用途
text 汎用的なテキスト入力
password パスワードの入力
number 数値の入力
range 範囲のある数値の入力
datetime/datetime-local 日付/時刻の入力
date 日付の入力
month 月の入力
week 週の入力
time 時刻の入力
color 色の選択
search 検索キーワードの入力
email メールアドレスの入力
tel 電話番号の入力
url URLの入力
type属性の主な設定値

 もっとも、jQuery Mobileでは、search、range型を除いては特別な機能を付与せず*1、クライアントの実装に委ねています。例えばnumberの場合、デスクトップ版のChromeでは数値を前後させるためのスピナーを付与しますが、Androidの標準ブラウザーでは標準的なテキストボックスを表示します(次の画面を参照)。ただし、テキストボックスにフォーカスすると、数値入力に適したソフトウェアキーボードを有効にします。その他の入力型(type)の場合も同様です。

 入力効率を向上するという意味で、type属性に適切な型を指定することは重要です。

ブラウザーによる表示の違い(上:Chrome、下:Android標準ブラウザー)
  • *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"」属性を付与したテキストボックス

 「data-role="none"」属性は、テキストボックスだけでなく、チェックボックス/ラジオボタン、選択ボックスなどでも利用できます。

※以下では、本稿の前後を合わせて5回分(第21回~第25回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
21. Selectmenuウィジェットで選択メニューを作成するには?

複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン/チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。

jQuery Mobile逆引きリファレンス
22. jQuery Mobileで入力フォームを設置するには?

jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。

jQuery Mobile逆引きリファレンス
23. 【現在、表示中】≫ Textinputウィジェットでテキスト入力ボックスを設置するには?

jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。

jQuery Mobile逆引きリファレンス
24. ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには?

<ul>/<li>要素や<ol>/<li>要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。

jQuery Mobile逆引きリファレンス
25. ListViewウィジェットで階層型リストを作成するには?

初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。

サイトからのお知らせ

Twitterでつぶやこう!