テキスト ボックスText box

TextBox コントロールによって、ユーザーはアプリにテキストを入力できます。The TextBox control lets a user type text into an app. 通常、1 行のテキストを取得するために使用されますが、複数行のテキストを取得するように構成できます。It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. テキストは、シンプルで同様のプレーンテキスト形式で画面に表示されます。The text displays on the screen in a simple, uniform, plaintext format.

TextBox には、テキスト入力を簡略化するための多くの機能があります。TextBox has a number of features that can simplify text entry. テキストのコピーと貼り付けをサポートする、使い慣れた組み込みのコンテキスト メニューが付属しています。It comes with a familiar, built-in context menu with support for copying and pasting text. [すべてクリア] ボタンによって、ユーザーは入力されているすべてのテキストを簡単に削除できます。The "clear all" button lets a user quickly delete all text that has been entered. スペル チェック機能も組み込まれており、既定で有効になっています。It also has spell checking capabilities built in and enabled by default.

重要な API: TextBox クラスText プロパティImportant APIs: TextBox class, Text property

適切なコントロールの選択Is this the right control?

ユーザーが書式設定されていないテキストを入力、編集できるようにするには、TextBox コントロールを使います。Use a TextBox control to let a user enter and edit unformatted text, such as in a form. TextBox 内のテキストの取得と設定には、Text プロパティを使います。You can use the Text property to get and set the text in a TextBox.

TextBox を読み取り専用にすることはできますが、これは一時的な条件付きの状態である必要があります。You can make a TextBox read-only, but this should be a temporary, conditional state. テキストを編集可能にしない場合は、代わりに TextBlock を使用することを検討してください。If the text is never editable, consider using a TextBlock instead.

PasswordBox コントロールを使用して、パスワードや、社会保障番号などの機密データを収集できます。Use a PasswordBox control to collect a password or other private data, such as a Social Security number. パスワード ボックスは、入力されたテキストの代わりに記号が表示される点を除けば、テキスト入力ボックスに似ています。A password box looks like a text input box, except that it renders bullets in place of the text that has been entered.

ユーザーが検索語句を入力できるようにしたり、入力時に選べる候補リストを表示したりするには、AutoSuggestBox コントロールを使います。Use an AutoSuggestBox control to let the user enter search terms or to show the user a list of suggestions to choose from as they type.

RichEditBox を使用して、リッチ テキスト ファイルを表示および編集します。Use a RichEditBox to display and edit rich text files.

適切なテキスト コントロールの選択について詳しくは、「テキスト コントロール」をご覧ください。For more info about choosing the right text control, see the Text controls article.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、TextBox の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the TextBox in action.

テキスト ボックス

テキスト ボックスの作成Create a text box

ヘッダーとプレースホルダーのテキストを含むシンプルなテキスト ボックスの XAML を次に示します。Here's the XAML for a simple text box with a header and placeholder text.

<TextBox Width="500" Header="Notes" PlaceholderText="Type your notes here"/>
TextBox textBox = new TextBox();
textBox.Width = 500;
textBox.Header = "Notes";
textBox.PlaceholderText = "Type your notes here";
// Add the TextBox to the visual tree.
rootGrid.Children.Add(textBox);

この XAML で表示されるテキスト ボックスは次のとおりです。Here's the text box that results from this XAML.

シンプルなテキスト ボックス

フォームでのデータ入力用のテキスト ボックスの使用Use a text box for data input in a form

テキスト ボックスを使用してフォームでデータ入力を受け付け、Text プロパティを使用してテキスト ボックスから完全なテキスト文字列を取得するのが一般的です。It’s common to use a text box to accept data input on a form, and use the Text property to get the complete text string from the text box. 通常、Text プロパティにアクセスするには、送信ボタンのクリックなどのイベントを使用しますが、テキストが変化したときに処理を実行する必要がある場合は、TextChanged イベントや TextChanging イベントを処理することができます。You typically use an event like a submit button click to access the Text property, but you can handle the TextChanged or TextChanging event if you need to do something when the text changes.

Header (ラベル) と PlaceholderText (透かし) をテキスト コントロールに追加すると、ユーザーに用途を示すことができます。You can add a Header (or label) and PlaceholderText (or watermark) to the text box to give the user an indication of what the text box is for. ヘッダーの外観をカスタマイズするには、Header ではなく HeaderTemplate プロパティを設定します。To customize the look of the header, you can set the HeaderTemplate property instead of Header. 設計については、「ラベルのガイドライン」を参照してください。For design info, see Guidelines for labels.

MaxLength プロパティを設定することによって、ユーザーが入力する文字数を制限できます。You can restrict the number of characters the user can type by setting the MaxLength property. ただし、MaxLength では、貼り付けられたテキストの長さは制限されません。However, MaxLength does not restrict the length of pasted text. アプリでこれが重要である場合は、Paste イベントを使って、貼り付けられたテキストを変更します。Use the Paste event to modify pasted text if this is important for your app.

テキスト ボックスには、テキストがボックスに入力されたときに表示されるすべてクリア ボタン ("X") が含まれています。The text box includes a clear all button ("X") that appears when text is entered in the box. ユーザーが [X] をクリックすると、テキスト ボックス内のテキストがクリアされます。When a user clicks the "X", the text in the text box is cleared. 次のようになります。It looks like this.

すべてクリア ボタンが表示されたテキスト ボックス

すべてクリア ボタンは、テキストが含まれフォーカスがある、編集可能な単一行テキスト ボックスにのみ表示されます。The clear all button is shown only for editable, single-line text boxes that contain text and have focus.

すべてクリア ボタンは、次のいずれかの場合には表示されません。The clear all button is not shown in any of these cases:

  • IsReadOnlytrue であるIsReadOnly is true
  • AcceptsReturntrue であるAcceptsReturn is true
  • TextWrap の値が NoWrap 以外であるTextWrap has a value other than NoWrap

テキスト ボックスを読み取り専用にするMake a text box read-only

IsReadOnly プロパティを true に設定すると、テキスト ボックスを読み取り専用にすることができます。You can make a text box read-only by setting the IsReadOnly property to true. 通常、アプリでの条件に基づいて、アプリ コードでこのプロパティを切り替えます。You typically toggle this property in your app code based on conditions in your app. テキストを常に読み取り専用にする必要がある場合は、代わりに TextBlock の使用を検討してください。If need text that is always read-only, consider using a TextBlock instead.

IsReadOnly プロパティを true に設定すると、TextBox を読み取り専用にすることができます。You can make a TextBox read-only by setting the IsReadOnly property to true. たとえば、ユーザーがコメントを入力するための TextBox が特定の条件下でのみ有効になるとします。For example, you might have a TextBox for a user to enter comments that is enabled only under certain conditions. 条件が満たされるまでは、TextBox を読み取り専用にすることができます。You can make the TextBox read-only until the conditions are met. テキストの表示のみが必要である場合は、代わりに TextBlock や RichTextBlock の使用を検討してください。If you need only to display text, consider using a TextBlock or RichTextBlock instead.

読み取り専用テキスト ボックスの見た目は読み取り/書き込み可能なテキスト ボックスと同じであるため、ユーザーを混乱させる可能性があります。A read-only text box looks the same as a read/write text box, so it might be confusing to a user. ユーザーはテキストを選択してコピーできます。A user can select and copy text. IsEnabledIsEnabled

複数行入力の有効化Enable multi-line input

テキスト ボックスで複数行にテキストを表示するかどうかを制御するために使用できるプロパティが 2 つあります。There are two properties that you can use to control whether the text box displays text on more than one line. 通常、両方のプロパティを設定して複数行テキスト ボックスを作成します。You typically set both properties to make a multi-line text box.

  • テキスト ボックスで改行文字の入力を受け付けて表示するには、AcceptsReturn プロパティを true に設定します。To let the text box allow and display the newline or return characters, set the AcceptsReturn property to true.
  • テキストの折り返しを有効にするには、TextWrapping プロパティを Wrap に設定します。To enable text wrapping, set the TextWrapping property to Wrap. これにより、テキストはテキスト ボックスの端に達すると、行の区切り文字とは無関係に折り返されます。This causes the text to wrap when it reaches the edge of the text box, independent of line separator characters.

  TextBox および RichEditBox は、TextWrapping プロパティの WrapWholeWords 値をサポートしていません。Note  TextBox and RichEditBox don't support the WrapWholeWords value for their TextWrapping properties. TextBox.TextWrapping または RichEditBox.TextWrapping の値として WrapWholeWords を使用しようとすると、無効な引数の例外がスローされます。If you try to use WrapWholeWords as a value for TextBox.TextWrapping or RichEditBox.TextWrapping an invalid argument exception is thrown.

複数行のテキスト ボックスは、その Height プロパティや MaxHeight プロパティ、または親コンテナーによって制約されていない場合、テキストを入力すると垂直方向に拡大し続けます。A multi-line text box will continue to grow vertically as text is entered unless it’s constrained by its Height or MaxHeight property, or by a parent container. 複数行テキスト ボックスが、表示領域を越えて拡大しないことをテストし、表示領域を越える場合は拡大を制約する必要があります。You should test that a multi-line text box doesn’t grow beyond its visible area, and constrain its growth if it does. 複数行テキスト ボックスの適切な高さを常に指定し、ユーザーが入力するときにテキスト ボックスの高さの拡大を許可しないことをお勧めします。We recommend that you always specify an appropriate height for a multi-line text box, and not let it grow in height as the user types.

スクロール ホイールまたはタッチを使ったスクロールは、必要に応じて自動的に有効になります。Scrolling using a scroll-wheel or touch is automatically enabled when needed. ただし、垂直方向のスクロール バーは、既定では表示されません。However, the vertical scrollbars are not visible by default. 垂直方向のスクロール バーを表示するには、次に示すように、ScrollViewer.VerticalScrollBarVisibilityAuto に設定します。You can show the vertical scrollbars by setting the ScrollViewer.VerticalScrollBarVisibility to Auto on the embedded ScrollViewer, as shown here.

<TextBox AcceptsReturn="True" TextWrapping="Wrap"
         MaxHeight="172" Width="300" Header="Description"
         ScrollViewer.VerticalScrollBarVisibility="Auto"/>
TextBox textBox = new TextBox();
textBox.AcceptsReturn = true;
textBox.TextWrapping = TextWrapping.Wrap;
textBox.MaxHeight = 172;
textBox.Width = 300;
textBox.Header = "Description";
ScrollViewer.SetVerticalScrollBarVisibility(textBox, ScrollBarVisibility.Auto);

テキストを追加した後、テキスト ボックスがどのようになるかを次に示します。Here's what the text box looks like after text is added.

複数行テキスト ボックス

テキストの表示形式の設定Format the text display

テキスト ボックス内のテキストを整列するには、TextAlignment プロパティを使います。Use the TextAlignment property to align text within a text box. ページのレイアウト内のテキスト ボックスを整列するには、HorizontalAlignment プロパティと VerticalAlignment プロパティを使います。To align the text box within the layout of the page, use the HorizontalAlignment and VerticalAlignment properties.

テキスト ボックスが書式設定されていないテキストのみをサポートするときに、ブランド化と一致するようにテキスト ボックスにテキストを表示する方法をカスタマイズできます。While the text box supports only unformatted text, you can customize how the text is displayed in the text box to match your branding. 標準的な Control プロパティ (FontFamilyFontSizeFontStyleBackgroundForegroundCharacterSpacing など) を設定して、テキストの外観を変更できます。You can set standard Control properties like FontFamily, FontSize, FontStyle, Background, Foreground, and CharacterSpacing to change the look of the text. これらのプロパティが影響を与えるのは、テキスト ボックスがローカルでテキストを表示する方法だけです。したがって、テキストをコピーしてリッチ テキスト コントロールなどに貼り付けても、書式設定は適用されません。These properties affect only how the text box displays the text locally, so if you were to copy and paste the text into a rich text control, for example, no formatting would be applied.

この例では、テキストの外観をカスタマイズするためにいくつかのプロパティが設定された読み取り専用のテキスト ボックスを示します。This example shows a read-only text box with several properties set to customize the appearance of the text.

<TextBox Text="Sample Text" IsReadOnly="True"
         FontFamily="Verdana" FontSize="24"
         FontWeight="Bold" FontStyle="Italic"
         CharacterSpacing="200" Width="300"
         Foreground="Blue" Background="Beige"/>
TextBox textBox = new TextBox();
textBox.Text = "Sample Text";
textBox.IsReadOnly = true;
textBox.FontFamily = new FontFamily("Verdana");
textBox.FontSize = 24;
textBox.FontWeight = Windows.UI.Text.FontWeights.Bold;
textBox.FontStyle = Windows.UI.Text.FontStyle.Italic;
textBox.CharacterSpacing = 200;
textBox.Width = 300;
textBox.Background = new SolidColorBrush(Windows.UI.Colors.Beige);
textBox.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
// Add the TextBox to the visual tree.
rootGrid.Children.Add(textBox);

このテキスト ボックスは次のように表示されます。The resulting text box looks like this.

書式設定されたテキスト ボックス

ショートカット メニューの変更Modify the context menu

既定では、テキスト ボックスのショートカット メニューに表示されるコマンドは、テキスト ボックスの状態によって異なります。By default, the commands shown in the text box context menu depend on the state of the text box. たとえば、次のコマンドは、テキスト ボックスが編集可能なときに表示できます。For example, the following commands can be shown when the text box is editable.

コマンドCommand 表示される状況Shown when...
コピーCopy テキストが選択されている。text is selected.
切り取りCut テキストが選択されている。text is selected.
貼り付けPaste クリップボードにテキストが含まれている。the clipboard contains text.
すべて選択Select all TextBox にテキストが含まれている。the TextBox contains text.
元に戻すUndo テキストが変更されている。text has been changed.

ショートカット メニューに表示されるコマンドを変更するには、ContextMenuOpening イベントを処理します。To modify the commands shown in the context menu, handle the ContextMenuOpening event. この処理の例については、ContextMenu のサンプルのシナリオ 2 をご覧ください。For an example of this, see Scenario 2 of the ContextMenu sample. デザインについて詳しくは、「ショートカット メニューのガイドライン」をご覧ください。For design info, see Guidelines for context menus.

選択、コピー、貼り付けSelect, copy, and paste

SelectedText プロパティを使って、テキスト ボックス内のテキストを取得または設定できます。You can get or set the selected text in a text box using the SelectedText property. SelectionStart プロパティと SelectionLength プロパティ、Select メソッドと SelectAll メソッドを使って、テキストの選択を操作します。Use the SelectionStart and SelectionLength properties, and the Select and SelectAll methods, to manipulate the text selection. ユーザーがテキストの選択または選択解除を行ったときに操作を実行するには、SelectionChanged イベントを処理します。Handle the SelectionChanged event to do something when the user selects or de-selects text. 選択したテキストを強調表示するために使用する色を変更するには、SelectionHighlightColor プロパティを設定します。You can change the color used to highlight the selected text by setting the SelectionHighlightColor property.

TextBox は、既定では、コピーと貼り付けをサポートしています。TextBox supports copy and paste by default. アプリの編集可能なテキスト コントロールで、Paste イベントのカスタム処理を行うことができます。You can provide custom handling of the Paste event on editable text controls in your app. たとえば、複数行のアドレスから単一行の検索ボックスに貼り付けるときに、改行を削除できます。For example, you might remove the line breaks from a multi-line address when pasting it into a single-line search box. または、貼り付けられたテキストの長さをチェックし、データベースに保存できる最大の長さを超えている場合はユーザーに警告することができます。Or, you might check the length of the pasted text and warn the user if it exceeds the maximum length that can be saved to a database. 詳しい説明と例については、Paste イベントに関するトピックをご覧ください。For more info and examples, see the Paste event.

これらのプロパティとメソッドを使う例を次に示します。Here, we have an example of these properties and methods in use. 1 つ目のテキスト ボックス内のテキストを選ぶと、選んだテキストが 2 つ目のテキスト ボックスに表示されます。2 つ目のテキスト ボックスは読み取り専用です。When you select text in the first text box, the selected text is displayed in the second text box, which is read-only. SelectionLength プロパティと SelectionStart プロパティの値は、2 つのテキスト ブロックに表示されます。The values of the SelectionLength and SelectionStart properties are shown in two text blocks. この処理を実行するには、SelectionChanged イベントを使います。This is done using the SelectionChanged event.

<StackPanel>
   <TextBox x:Name="textBox1" Height="75" Width="300" Margin="10"
         Text="The text that is selected in this TextBox will show up in the read only TextBox below."
         TextWrapping="Wrap" AcceptsReturn="True"
         SelectionChanged="TextBox1_SelectionChanged" />
   <TextBox x:Name="textBox2" Height="75" Width="300" Margin="5"
         TextWrapping="Wrap" AcceptsReturn="True" IsReadOnly="True"/>
   <TextBlock x:Name="label1" HorizontalAlignment="Center"/>
   <TextBlock x:Name="label2" HorizontalAlignment="Center"/>
</StackPanel>
private void TextBox1_SelectionChanged(object sender, RoutedEventArgs e)
{
    textBox2.Text = textBox1.SelectedText;
    label1.Text = "Selection length is " + textBox1.SelectionLength.ToString();
    label2.Text = "Selection starts at " + textBox1.SelectionStart.ToString();
}

このコードを実行すると、次のように表示されます。Here's the result of this code.

テキスト ボックスで選択されたテキスト

テキスト コントロールに適切なキーボードの選択Choose the right keyboard for your text control

ユーザーがタッチ キーボード、つまりソフト入力パネル (SIP) でデータを入力できるように、ユーザーが入力すると予想されるデータの種類に合わせてテキスト コントロールの入力スコープを設定できます。To help users to enter data using the touch keyboard, or Soft Input Panel (SIP), you can set the input scope of the text control to match the kind of data the user is expected to enter.

タッチ キーボードは、アプリがタッチ スクリーン付きのデバイスで実行されているときにテキスト入力に使うことができます。The touch keyboard can be used for text entry when your app runs on a device with a touch screen. タッチ キーボードは、TextBox または RichEditBox などの編集可能な入力フィールドをユーザーがタップしたときに呼び出されます。The touch keyboard is invoked when the user taps on an editable input field, such as a TextBox or RichEditBox. ユーザーが入力すると予想されるデータの種類と一致するようにテキスト コントロールの入力スコープを設定することで、ユーザーがより速く簡単にアプリにデータを入力できるようになります。You can make it much faster and easier for users to enter data in your app by setting the input scope of the text control to match the kind of data you expect the user to enter. 入力値の種類は、システムに対してコントロールが予期しているテキスト入力の種類のヒントとなるため、システムはその入力の種類用の特殊なタッチ キーボード レイアウトを提供できます。The input scope provides a hint to the system about the type of text input expected by the control so the system can provide a specialized touch keyboard layout for the input type.

たとえば、テキスト ボックスが 4 桁の PIN の入力専用の場合は、InputScope プロパティを Number に設定します。For example, if a text box is used only to enter a 4-digit PIN, set the InputScope property to Number. これにより、システムに数字キーパッド レイアウトの表示が指示されるため、ユーザーは簡単に PIN を入力できます。This tells the system to show the number keypad layout, which makes it easier for the user to enter the PIN.

重要  入力値の種類の設定によって、入力の検証が実行されるわけではありません。また、ユーザーが、ハードウェア キーボードやその他の入力デバイスから入力できなくなることもありません。Important  The input scope does not cause any input validation to be performed, and does not prevent the user from providing any input through a hardware keyboard or other input device. 必要に応じて、コードで入力を検証する必要があります。You are still responsible for validating the input in your code as needed.

タッチ キーボードに影響するその他のプロパティとして、IsSpellCheckEnabledIsTextPredictionEnabledPreventKeyboardDisplayOnProgrammaticFocus があります Other properties that affect the touch keyboard are IsSpellCheckEnabled, IsTextPredictionEnabled, and PreventKeyboardDisplayOnProgrammaticFocus. (IsSpellCheckEnabled は、ハードウェア キーボードを使用する場合にも TextBox に影響します)。(IsSpellCheckEnabled also affects the TextBox when a hardware keyboard is used.)

詳細な情報と例については、「入力値の種類を使ったタッチ キーボードの変更」とプロパティのドキュメントをご覧ください。For more info and examples, see Use input scope to change the touch keyboard and the property documentation.

推奨事項Recommendations

  • テキスト ボックスの目的がわかりにくい場合は、ラベルまたはプレースホルダー テキストを使用します。Use a label or placeholder text if the purpose of the text box isn't clear. ラベルは、テキスト入力ボックスに値が存在するかどうかに関係なく表示します。A label is visible whether or not the text input box has a value. プレースホルダー テキストはテキスト入力ボックスの内側に表示され、値を入力すると非表示になります。Placeholder text is displayed inside the text input box and disappears once a value has been entered.
  • テキスト ボックスは、入力できる値の範囲に適した幅になるようにします。Give the text box an appropriate width for the range of values that can be entered. 単語の長さは言語によって異なるため、アプリを世界対応にする場合は、ローカライズを考慮に入れて幅を調整します。Word length varies between languages, so take localization into account if you want your app to be world-ready.
  • テキスト入力ボックスは、通常、単一行 (TextWrap = "NoWrap") です。A text input box is typically single-line (TextWrap = "NoWrap"). ユーザーが長い文字列を入力または編集する必要がある場合は、テキスト入力ボックスを複数行 (TextWrap = "Wrap") に設定します。When users need to enter or edit a long string, set the text input box to multi-line (TextWrap = "Wrap").
  • 通常、テキスト入力ボックスは編集可能なテキストに対して使います。Generally, a text input box is used for editable text. ただし、読み取り、選択、コピーはできるが編集はできないように、テキスト入力ボックスを読み取り専用に設定することもできます。But you can make a text input box read-only so that its content can be read, selected, and copied, but not edited.
  • 画面をすっきりと見せる必要がある場合は、制御するチェック ボックスがオンの場合のみ、一連のテキスト入力ボックスを表示することをお勧めします。If you need to reduce clutter in a view, consider making a set of text input boxes appear only when a controlling checkbox is checked. また、有効な状態のテキスト入力ボックスをチェック ボックスなどのコントロールにバインドすることもできます。You can also bind the enabled state of a text input box to a control such as a checkbox.
  • 既に値が入力されているテキスト入力ボックスをユーザーがタップしたときの動作を検討します。Consider how you want a text input box to behave when it contains a value and the user taps it. 既定の動作では、単語の間に挿入ポイントが配置され、何も選択されません。この動作は値の置き換えよりも編集に適しています。The default behavior is appropriate for editing the value rather than replacing it; the insertion point is placed between words and nothing is selected. 対象のテキスト入力ボックスが、編集よりも主に置き換えに使われる場合は、フォーカスを受け取ったときにフィールドのすべてのテキストを選択し、入力によって選択内容が置き換えられるように設定できます。If replacing is the most common use case for a given text input box, you can select all the text in the field whenever the control receives focus, and typing replaces the selection.

単一行入力ボックスSingle-line input boxes

  • 少量のテキスト情報を多数取得する場合は、いくつかの単一行テキスト ボックスを使います。Use several single-line text boxes to capture many small pieces of text information. それらのテキスト ボックスに関連性がある場合は、グループ化します。If the text boxes are related in nature, group those together.

  • 単一行テキスト ボックスの幅は、予測される最長の入力値より少し広くします。Make the size of single-line text boxes slightly wider than the longest anticipated input. そのようにするとコントロールの幅が広くなり過ぎる場合は、2 つのコントロールに分割します。If doing so makes the control too wide, separate it into two controls. たとえば、1 つの住所の入力を "Address line 1" と "Address line 2" に分割できます。For example, you could split a single address input into "Address line 1" and "Address line 2".

  • 入力できる最大文字数を設定します。Set a maximum length for characters that can be entered. バッキング データ ソースが長い入力文字列を許可しない場合は、入力を制限し、制限に達したら検証ポップアップを使ってユーザーに知らせます。If the backing data source doesn't allow a long input string, limit the input and use a validation popup to let users know when they reach the limit.
  • ユーザーから少量のテキストを収集するには、単一行テキスト入力コントロールを使います。Use single-line text input controls to gather small pieces of text from users.

    次の例は、セキュリティの質問への回答を取得する単一行テキスト ボックスを示しています。The following example shows a single-line text box to capture an answer to a security question. 回答には短い文字列が想定されるので、単一行テキスト ボックスが適しています。The answer is expected to be short, and so a single-line text box is appropriate here.

    基本データ入力

  • 特定の書式のデータを入力するには、短い固定サイズの単一行テキスト入力コントロールのセットを使います。Use a set of short, fixed-sized, single-line text input controls to enter data with a specific format.

    書式付きのデータ入力

  • 文字列を入力または編集するには、単一行の、制約のないテキスト入力コントロールと、ユーザーが有効な値を選択できるように補助するコマンド ボタンを組み合わせて使います。Use a single-line, unconstrained text input control to enter or edit strings, combined with a command button that helps users select valid values.

    補助付きのデータ入力

複数行テキスト入力コントロールMulti-line text input controls

  • リッチ テキスト ボックスを作る場合は、スタイル設定ボタンを用意し、その動作を実装します。When you create a rich text box, provide styling buttons and implement their actions.
  • アプリのスタイルに合ったフォントを使います。Use a font that's consistent with the style of your app.
  • テキスト コントロールの高さは、典型的な入力が十分に入るように設定します。Make the height of the text control tall enough to accommodate typical entries.
  • 最大文字数または単語数を設定して長いテキストを取得する場合、プレーンテキスト ボックスを使い、ライブ実行のカウンターを用意して、制限までの残りの文字数または単語数をユーザーに示します。When capturing long spans of text with a maximum character or word count, use a plain text box and provide a live-running counter to show the user how many characters or words they have left before they reach the limit. カウンターは自分で作成する必要があります。テキスト ボックスの下に配置し、ユーザーが文字や単語を入力するたびに動的に更新します。You'll need to create the counter yourself; place it below the text box and dynamically update it as the user enters each character or word.

    長いテキスト

  • ユーザーの入力中にテキスト入力コントロールの高さが増加するようにはしません。Don't let your text input controls grow in height while users type.

  • ユーザーが 1 行しか必要としていない場合は、複数行テキスト ボックスを使いません。Don't use a multi-line text box when users only need a single line.
  • プレーンテキスト コントロールで十分な場合に、リッチ テキスト コントロールを使わないでください。Don't use a rich text control if a plain text control is adequate.

サンプル コードを入手するGet the sample code