テキスト入力

テキスト入力とテキストエリア

テキスト入力ボックスとテキストエリアは、通常のHTML要素でコーディングされるとjQuery Mobileによって自動的に、よりもモバイル端末で見栄えが良く使いやすいように整形されます。テキスト入力に指定可能な属性についてはdata属性リファレンスを参照してください。

テキスト入力ボックス

標準的なテキスト入力には input 要素に type=“text” 属性を指定したものを用います。この input 要素に指定したIDに対応させた for 属性を持つ label を、意味的な関連を持たせるために必ずセットにしてください。もしページレイアウト的な理由からラベルを表示したくない場合、ラベルを隠すことも可能です。しかしセマンティックな、そしてアクセシビリティの観点から、かならずラベルを作成するようにしましょう。

<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />

このコードによって、基本的なテキスト入力が作られます。デフォルトのスタイルでは、横幅は親要素に対して100%となり、ラベルは別の行に配置されます。

ミニバージョン

ツールバー内など狭いスペースでは、よりコンパクトな大きさのボタンが便利です。ボタンに data-mini=“true” 属性を追加することで、ミニサイズにできます。

<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" data-mini="true" />

フィールドコンテナ

これらをコンテナ要素で囲み、そこに data-role=“fieldcontain” 属性を指定することで、見た目を制御することも可能です。

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

様々な種類の入力ボックス

jQuery Mobileでは、たとえば password, email, tel, number などのような、HTML5で追加された様々な種類のインプットボックスを扱うことができます。幾つかの要素は、ブラウザによって異なったレンダリングをされます。たとえば、Chromeでは range を指定した input はスライダーの形になります。そこでjQuery Mobileでは、これらの指定を全て一度 text にしてしまい、動的に一律的に見える要素を作成するようにしています(現時点で、こうしたことが行われるのは range と search です)。こうした text にデグレードさせる対象は page プラグインのオプションで指定することが可能です。

特別な種類の入力ボックスを使う最大の利点は、モバイル端末によっては、入力をスピーディーにする特殊なキーボードなどが用いられるようになることです。試しに、以下の入力ボックスを携帯端末でフォーカスしてみてください。様々なパターンのキーボードが見られると思います。

テキストエリア

複数行のテキスト入力をさせるには textarea 要素を用います。テキストエリア要素の高さは、入力内容に併せて自動的に拡張されます。これは、モバイル端末での使い勝手が非常に悪い、テキストエリア内のスクロールバーを避けるためです。

ラベルは label 要素に for 属性で input 要素のIDを指定することでセマンティックにつなげられます。それらをひとつの div で囲み data-role=“fieldcontain” 属性を指定してグループ化するようにしてください。

<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
I'm a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature.
</textarea>

これで、横幅が親要素に対して100%の基本的なテキストエリアが生成されます。ラベルは別の行に配置されます。入力にあわせて新しい行が自動的にひろがっていくようになっています。

テキスト入力同様に、フィールドコンテナで囲むことも可能です。

<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
        <textarea name="textarea" id="textarea"></textarea>
</div>

プラグイン textinput の呼び出し

テキストエリアや、上記したようなテキスト入力は、いずれも data-role 属性の指定を必要とせず自動的にプラグインが適用されます。しかし、もし他のjQueryプラグイン同様に手動で特定の要素に textinput プラグインを適用したい場合、次のようにします。

$('input').textinput();

デグレード

jQuery Mobileは拡張コントロールを適用した後で、いくつかのHTML5におけるinput type属性を type=“text” や “number” にデグレードします。たとえば type=“range” が指定された input 要素は、カスタムスライダーに拡張されます。そしてその後、type属性は “number” にデグレードされます。また type に “search” が設定されている場合も、フレームワークが検索入ボックスを作成した後で type=“text” に変えられます。

ページプラグインは、こうした type=“text” に出グレードする属性値のリストを持っています。ページプラグインの degradeInputs オプションにより、どのtypeがデグレードされるかを設定することが出来ます。全てのページで適用する場合は $.mobile.page.prototype.options.degradeInputs のようにプロトタイプを設定することで制御できます。ここには color, data, datetime, “datetime-local”, email, month, number, range, search, tel, time, url, week のプロパティが含まれます。デグレードしたい場合、ここに変換したい値(“text“など)を設定します。この設定は、最初のページにも次に読み込まれるページにも適用されるよう mobileinit イベントで行うようにしてください。

オプション

テキスト入力プラグインは、次のようなオプションを持ちます。

initSelector CSS selector string

default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"

ここには、自動初期化処理により textinuputs プラグインになるセレクタを定義します。この値を変更するにはmobileinitイベントを使います。

$( document ).bind( "mobileinit", function(){
   $.mobile.textinput.prototype.options.initSelector = ".myInputs";
});

mini boolean

default: false

要素のサイズを、よりコンパクトなミニバージョンにする。このオプションは、data属性でも指定可能: data-mini="true"

$('.selector').textinput({ mini: "true" });

preventFocusZoom boolean

default: true on iOS platforms

このオプションは、テキスト入力にフォーカスがある時に一時的にページのズーム機能を使えないようにします。これは、iOS上でしばしば起こる、入力ボックスへフォーカスした際に不必要にズームする挙動を防ぐために使うことができます。このオプションはdata属性によっても指定可能です: data-prevent-focus-zoom="true"

$('input').textinput({ preventFocusZoom: true });

theme string

default: null, inherited from parent

ウィジェットの色(スウォッチ)を指定します。テーマで定義されたスウォッチをあらわすaからzまでのアルファベットが指定できます。デフォルトでは、個別に設定されない場合、親要素のスウォッチ指定を引き継ぐようになっています。このオプションはdata属性でも次のように表現できます: data-theme="a"

$('.selector').textinput({ theme: "a" });

メソッド

テキスト入力プラグインは、次のようなメソッドを持ちます。

enable 使用不可状態のテキスト入力を使用可能にする。

 $('.selector').textinput('enable');                 

disable テキスト入力を使用不可状態にする。

 $('.selector').textinput('disable');                        

イベント

直接 input 要素イベントにバインドしてください。jQuery Mobileによる仮想的なイベント、もしくは change, focus, blur などのような標準的なJavaScriptのイベントにバインドできます。

$( ".selector" ).bind( "change", function(event, ui) {
  ...
});

テキスト入力プラグインは、次のような独自イベントも持っています。

create triggered when a text input is created

$( ".selector" ).textinput({
   create: function(event, ui) { ... }
});