jQuery Mobile テキスト入力を設置する

この記事ではフォーム部品の基本となるテキスト入力を jQuery Mobile で設置する方法を解説します。input要素に「type="text"」などを指定したテキストボックスと textarea要素を使うテキストエリアの設置方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. テキスト入力の概要
  2. テキストボックスを設置する
  3. テキストエリアを設置する

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

テキスト入力の概要

標準的なテキスト入力ボックスを設置するには、input要素の type属性に "text" を指定します。複数行のテキスト入力は textarea要素でマークアップします。

その他テキスト型の入力として、HTML5では指定できる値の種類が増えています。
type属性に指定できる値としては、password, number, range, datetime, datetime-local, month, week, time, color, search, email, tel, url などです。

ブラウザによっては type属性の指定により異なったレンダリングをする場合がありますが、jQuery Mobile では "range" と "search" を除き、すべて "text" と同じ一様なスタイルにしています。そしてスピナーの追加や入力に適したキーボードの選択などはブラウザの実装にまかせています。

テキストボックスを設置する

テキストボックスは基本となるフォーム部品です。
標準的なボックスには「type="text"」を指定しますが、日付には "date" やメールアドレスには "email" を指定できます。

テキストボックスの設置画面

サイズを小さくする

テキストボックスのサイズを小さくしたいときは、「data-mini="true"」を input要素に指定します。ボックスの縦のサイズが小さくなります。

クリアボタンを追加する

input要素に「data-clear-btn="true"」を指定すると、クリアボタンが追加されます。
また、data-clear-btn-text属性でクリアボタンのツールチップテキストを指定できます。デフォルトは "Clear text" になっています。

クリアボタンを追加した画面

テキストエリアを設置する

テキストエリアを設置するには、textarea要素を使いますが、その他の設定はinput要素と同じです。

テキストエリアの高さは入力した文字数にあわせて自動的に拡張されます。

テキストエリアの設置画面

HTML5ではinput要素のtype属性に指定できる値が一気に増えました。Chromeではそれらの対応が進んでおり、独自の入力補助機能をかなり実装しています。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ