TextBox (React)

テキストボックスは、ボタンコンポーネント（Button）と並び、グラフィカルユーザーインターフェースにおいて最も基本的かつ頻繁に利用されるコンポーネントの一つだ。 ここで扱うのは書式設定なし（太字や斜体などがない）のテキスト入力であり、書式設定に対応したテキストエディタは、これとは別のより複雑なトピックとなる。 書式設定はないものの、名前、住所、各種タイトルなど、このコンポーネントを通じてユーザーから受け取るデータは多岐にわたる。 さらに「テキスト」とは、単に完結した文章の集まりだけを指すのではなく、文字の連なりとして表現できるあらゆる情報を意味する：

• メールアドレス
• パスワード
• リンク

また、このコンポーネントは数値データの入力に使われることもあるが、多くの場合、それらは「数値」そのものではなく、補助記号が混ざった数字の羅列だ：

• 電話番号
• 郵便番号
• クレジットカード番号

多くの場合、このコンポーネントは改行を想定しておらず、入力された文字数が多いときはその一部のみが表示される（矢印キーによるスクロールは可能）。 しかし、ユーザーに完結した文章（あるいは段落）の入力を求める場合には改行が必要となり、これは一種の単純なテキスト書式設定とみなせることもある。 HTMLの観点では、複数行テキストには別の要素が使われ（当初は高さの自動調整機能も備わっていない）、一方でYDFでは、対応するオプションを指定するだけで複数行モードをサポートでき、高さの自動調整も利用可能だ。

ボタンと同様、テキストフィールドの単純さは見かけによらない。 第一に、テキスト入力フィールドは バリデーション対応コンポーネントであり、そのため入力データのバリデーション（検証）という課題の複雑さが、このコンポーネントに直接関係してくる。 YDFにおけるテキスト入力フィールドは、 ValidatableControlShellコンポーネントにラップされた他のコンポーネントと同様、ラベル、注釈、バリデーションエラー一覧などのオプションの補助要素を含んでいるが、HTMLの観点ではこれらはすべて個別の要素となる。

テキスト入力フィールドには多くの状態がある。 視覚的に区別されるべき状態は、少なくとも以下の通りだ：

:hover

マウスカーソルが重なったときに有効になる。システムがユーザーの操作に反応していること、およびクリックすれば入力を開始できることをユーザーに伝える。

:focus

テキストフィールドがフォーカスを得たときに有効になる。つまり、キーボード入力がこのテキストフィールド内で受け付けられる状態であることを示す。

:readonly/:disabled

入力フィールドが読み取り専用のときに有効になる。 多くのアプリケーションには閲覧モードと編集モードがあるため、この機能は決して珍しいものではない。

バリデーションエラー（Invalid）状態

入力された値が有効でないとき、および有効性の表示モードが有効な場合にアクティブになる。 入力フィールドが初期状態で空かつ必須入力である場合、その空の値は最初から無効だが、まだ何もしていないユーザーに対してフィールドを赤く強調したりエラーを通知したりする前に、まずは入力を許可すべきだ。そして、ユーザーが入力フィールドからフォーカスを外したときに初めて、有効性の表示モードを有効にできる。 なお、このような概念はHTML/CSSの観点では存在しない。そのため、required や minlength といったHTML属性、および 疑似クラス :invalid を使ってバリデーションを定義すると、ユーザーが空のフィールドに入力を開始したかどうかにかかわらず、これらのスタイルが適用されてしまう。

さらに、これらの状態の一部は同時に発生し得る。 例えば、hover 状態は focus と同時に発生することがあり、これら両方の状態が invalid の上に重なって発生することもある。 ここでスタイルの優先順位という問題が生じる。

また、実務において入力フィールドには以下のような追加機能が求められる：

• デザインに応じて左側または右側に配置できるアイコン
• パスワードの表示/非表示の切り替えボタン
• 入力された値をコピーするためのボタン

これらすべての機能は、TextBox コンポーネントで利用可能だ。

• 概要
• TextBoxクラス
  • Reactプロパティ

概要

コンポーネントのクラス

TextBox

ReactコンポーネントのLive template (IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)

オートコンプリート系

TextBox--YDF-React

省略

tb-ydf-react

スタイル生成専用Stylusミクスイン

generateTextBoxYDF_GUI_ComponentStyles

用意済みのテーマ

TextBox.Themes.regular

標準（規定）

用意済みの幾何学的変形

TextBox.GeometricVariations.regular

標準（規定）

TextBox.GeometricVariations.small

小型

TextBox.GeometricVariations.labelLike

一般ラベル外見

幾何学的修飾子

TextBox.GeometricModifiers.noRoundings

面取り無し

用意済みの修飾的変形

TextBox.DecorativeVariations.regular

標準（規定）

TextBox.DecorativeVariations.labelLike

一般ラベル外見

ローディングプレースホルダ

無し

TextBoxクラス

Reactプロパティ