メインコンテンツまでスキップ
バージョン: v8

ion-textarea

scoped

textareaコンポーネントは、複数行のテキスト入力に使用されます。ネイティブの textarea 要素は、コンポーネントの内部でレンダリングされます。ネイティブのtextareaを制御することで、textareaコンポーネントのユーザーエクスペリエンスとインタラクティブ性を向上させることができます。

ネイティブのtextarea要素とは異なり、Ionicのtextareaは要素内部のコンテンツからその値を読み込むことをサポートしていません。textareaの値はvalue属性で設定しなくてはなりません。

textareaコンポーネントはIonicのプロパティに加えて ネイティブのtextareaの属性 に対応します。

基本的な使い方​

Labels​

ラベルは、textareaを説明するために使用すべきです。視覚的に使用でき、ユーザーがtextareaにフォーカスしたときにスクリーンリーダーによって読み上げられます。これにより、ユーザーがtextareaの意図を理解しやすくなります。Textareaには、ラベルを割り当てるいくつかの方法があります：

  • label プロパティ: プレーンテキストのラベルに使用
  • label スロット: カスタムHTMLラベルに使用（実験的）
  • aria-label: スクリーンリーダーにラベルを提供するために使用されますが、表示されるラベルは追加されません

Label Placement​

ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。

Label Slot (実験的)​

プレーンテキストのラベルは label プロパティを通して渡されるべきですが、カスタム HTML が必要な場合は、代わりに label スロットを通して渡すことができます。

この機能は、Web Component slotsのシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。

No Visible Label​

ラベルの表示が必要ない場合でも、開発者はaria-labelを指定して、textareaがスクリーンリーダーにアクセスできるようにすべきです。

Filled Textareas​

Material Designでは、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの fill プロパティは "solid" または "outline" のいずれかに設定することができます。

iOSでは、Textareasのmodeをmdに設定することで、Filled Textareasを使うことができます。

警告

コンポーネント間のスタイリングの競合のため、fillを使用するTextareaはion-item内で使用すべきではありません。

Helper & Error Text​

ヘルパーテキストとエラーテキストは、helperText と errorText プロパティを使って textarea 内で使用することができます。エラーテキストは、ion-invalid と ion-touched クラスが ion-textarea に追加されていない限り表示されません。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。

Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。

Textarea Counter​

textareaカウンターは、textareaの下に表示されるテキストで、textareaが受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を inputLength / maxLength としてフォーマットすることです。この動作は、counterFormatterプロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。

Autogrow​

autoGrowプロパティがtrueに設定されている場合、テキストエリアはその内容に基づいて拡大・縮小します。

Clear on Edit​

clearOnEditプロパティをtrueに設定すると、テキストエリアが編集削除された後、再度入力されるとクリアされます。

Start and End Slots (experimental)​

startとendスロットは、textareaの両側にアイコン、ボタン、またはプレフィックス/サフィックステキストを配置するために使用できます。

この機能は、Web Component slotsのシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。

注記

ほとんどの場合、これらのスロットに配置されたIconコンポーネントにはaria-hidden="true"を設定すべきです。詳細については、Icon accessibility docsを参照してください。

スロットコンテンツが操作対象である場合、Buttonなどのインタラクティブ要素でラップする必要があります。これにより、コンテンツにタブで移動できるようになります。

Theming​

Interfaces​

TextareaChangeEventDetail​

interface TextareaChangeEventDetail {
  value?: string | null;
}

TextareaCustomEvent​

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface TextareaCustomEvent extends CustomEvent {
  detail: TextareaChangeEventDetail;
  target: HTMLIonTextareaElement;
}

プロパティ​

autoGrow​

Descriptiontrueの場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。
Attributeauto-grow
Typeboolean
Defaultfalse

autocapitalize​

Descriptionテキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション: "off", "none", "on", "sentences", "words", "characters".
Attributeautocapitalize
Typestring
Default'none'

autofocus​

Descriptionネイティブの入力要素に autofocus 属性 を設定します。 ページロード時に要素がフォーカスされるには、これだけでは不十分かもしれません。詳しくはmanaging focusを参照してください。
Attributeautofocus
Typeboolean
Defaultfalse

clearOnEdit​

Descriptiontrueの場合、編集時にフォーカスが当たった後、値がクリアされる。
Attributeclear-on-edit
Typeboolean
Defaultfalse

color​

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Defaultundefined

cols​

Descriptionテキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。
Attributecols
Typenumber ｜ undefined
Defaultundefined

counter​

Descriptiontrueの場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は maxlength プロパティも設定する必要があります。
Attributecounter
Typeboolean
Defaultfalse

counterFormatter​

Descriptionカウンターのテキストをフォーマットするためのコールバック。デフォルトでは、カウンタのテキストは "itemLength / maxLength" に設定される。 コールバック内から this にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照。
Attributecounter-formatter
Type((inputLength: number, maxLength: number) => string) ｜ undefined
Defaultundefined

debounce​

Descriptionキーを押すたびに ionInput イベントが発生するまでの待ち時間をミリ秒単位で設定します。
Attributedebounce
Typenumber ｜ undefined
Defaultundefined

disabled​

Descriptiontrueの場合、ユーザはテキストエリアと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

enterkeyhint​

Descriptionどのエンターキーを表示するかのブラウザへのヒント。指定可能な値。"enter", "done", "go", "next", "previous", "search", and "send".
Attributeenterkeyhint
Type"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined
Defaultundefined

errorText​

Descriptionテキストエリアの下に配置され、エラーが検出されたときに表示されるテキストです。
Attributeerror-text
Typestring ｜ undefined
Defaultundefined

fill​

Descriptionアイテムの塗りつぶし。もし "solid" ならば、アイテムは背景を持つようになります。もし "outline" ならば、アイテムはボーダー付きの透明なものになります。mdモードでのみ使用可能です。
Attributefill
Type"outline" ｜ "solid" ｜ undefined
Defaultundefined

helperText​

Descriptiontextareaの下に配置され、エラーが検出されなかった場合に表示されるテキストです。
Attributehelper-text
Typestring ｜ undefined
Defaultundefined

inputmode​

Descriptionどのキーボードを表示するかのブラウザへのヒント。指定可能な値。"none", "text", "tel", "url", "email", "numeric", "decimal", and "search".
Attributeinputmode
Type"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined
Defaultundefined

label​

Descriptiontextareaに関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 両方が使用されている場合、label プロパティが label スロットよりも優先される。
Attributelabel
Typestring ｜ undefined
Defaultundefined

labelPlacement​

Descriptionテキストエリアと相対的にラベルを配置する場所。"start"：ラベルはLTRではテキストエリアの左側に、RTLでは右側に表示されます。"end"：ラベルはLTRではテキストエリアの右側に、RTLでは左側に表示されます。"floating"：ラベルは、テキストエリアにフォーカスが当たっているか、値がある場合、小さく表示され、テキストエリアの上に表示されます。それ以外の場合はtextareaの上に表示されます。"stacked"：テキストエリアがぼやけた状態や値がない場合でも、ラベルは小さく表示され、テキストエリアの上に表示されます。固定"：ラベルの幅が固定される以外は、"start"`と同じ動作になります。長いテキストは省略記号（"..."）で切り捨てられます。
Attributelabel-placement
Type"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start"
Default'start'

maxlength​

Descriptionこの属性は、ユーザが入力できる最大文字数を指定します。
Attributemaxlength
Typenumber ｜ undefined
Defaultundefined

minlength​

Descriptionこの属性は、ユーザーが入力できる最小の文字数を指定します。
Attributeminlength
Typenumber ｜ undefined
Defaultundefined

mode​

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" ｜ "md"
Defaultundefined

name​

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

placeholder​

Description入力が値を持つ前に表示される指示文。
Attributeplaceholder
Typestring ｜ undefined
Defaultundefined

readonly​

Descriptiontrueの場合、ユーザーは値を変更することができません。
Attributereadonly
Typeboolean
Defaultfalse

required​

Descriptiontrueの場合、ユーザーはフォームを送信する前に値を入力する必要があります。
Attributerequired
Typeboolean
Defaultfalse

rows​

Descriptionコントロールの可視テキスト行数。
Attributerows
Typenumber ｜ undefined
Defaultundefined

shape​

Descriptionテキストエリアの形状を指定します。round "の場合、ボーダーの半径が大きくなります。
Attributeshape
Type"round" ｜ undefined
Defaultundefined

spellcheck​

Descriptiontrueの場合、その要素のスペルチェックと文法チェックが行われる。
Attributespellcheck
Typeboolean
Defaultfalse

value​

Descriptiontextareaの値です。
Attributevalue
Typenull ｜ string ｜ undefined
Default''

wrap​

Descriptionコントロールがテキストをどのように折り返すかを示します。
Attributewrap
Type"hard" ｜ "off" ｜ "soft" ｜ undefined
Defaultundefined

イベント​

NameDescriptionBubbles
ionBlurInputのフォーカスが外れたときに発行されます。true
ionChangeonChange イベントは、ユーザが textarea の値を変更したときに発生する。ionInput イベントとは異なり、ionChangeイベントは値が変更された後に要素のフォーカスが外れたときに発生する。 このイベントは、プログラムでvalue` プロパティを設定した場合には発生しない。true
ionFocusInputにフォーカスが当たったときに発行されます。true
ionInputionInput イベントは、ユーザが textarea の値を変更するたびに発生する。ionChange イベントとは異なり、ionInput イベントは textarea の値が変更されるたびに発生する。これは通常、ユーザがキーを入力するたびに発生する。 clearOnEdit が有効な場合、ユーザが textarea をクリアするためにキーダウンを行うと、ionInput イベントが発生する。true

メソッド​

getInputElement​

Description要素の内部で使用されるネイティブの <textarea> 要素を返します。
SignaturegetInputElement() => Promise<HTMLTextAreaElement>

setFocus​

Descriptionion-textareaのネイティブ textarea にフォーカスを設定する。グローバルメソッド textarea.focus() の代わりにこのメソッドを使用する。 詳細は managing focus を参照してください。
SignaturesetFocus() => Promise<void>

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSSカスタムプロパティ​

NameDescription
--backgroundtextareaの背景
--border-colorヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの色
--border-radiusテキストエリアの境界半径
--border-styleヘルパーテキスト、エラーテキスト、カウンター使用時のテキストエリア下のボーダーのスタイル
--border-widthヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの幅
--color本文の色
--highlight-color-focusedフォーカスされたときのテキストエリアのハイライトの色
--highlight-color-invalid無効時のテキストエリア上のハイライトの色
--highlight-color-valid有効時のテキストエリアのハイライトの色
--highlight-heightテキストエリアのハイライトの高さ。mdモードにのみ適用される。
--padding-bottomテキストエリアのBottom Padding
--padding-endテキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。
--padding-starttextareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。
--padding-toptextareaのTop Padding
--placeholder-colorPlaceholderテキストの色
--placeholder-font-stylePlaceholderテキストのスタイル
--placeholder-font-weightPlaceholderテキストの重さ
--placeholder-opacityPlaceholderテキストの不透明度

Slots​

NameDescription
endtextarea の末尾に表示する内容。(実験的)
labelテキストエリアに関連付けるラベルテキスト。labelPlacement`プロパティを使用して、textareaに対するラベルの位置を制御する。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。(実験的)
starttextarea の前端に表示する内容。(実験的)

Contents

このページを編集