ion-textarea
The textarea component is used for multi-line text input. A native textarea element is rendered inside of the component. The user experience and interactivity of the textarea component is improved by having control over the native textarea.
Unlike the native textarea element, the Ionic textarea does not support loading its value from the inner content. The textarea value should be set in the value attribute.
The textarea component accepts the native textarea attributes in addition to the Ionic properties.
Basic Usage
Autogrow
When the autoGrow property is set to true, the textarea will grow and shrink based on its contents.
Clear on Edit
Setting the clearOnEdit property to true will clear the textarea after it has been blurred and then typed in again.
Theming
Interfaces
TextareaChangeEventDetail
interface TextareaChangeEventDetail {
value?: string | null;
}
TextareaCustomEvent
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface TextareaCustomEvent extends CustomEvent {
detail: TextareaChangeEventDetail;
target: HTMLIonTextareaElement;
}
Properties
autoGrow
| Description | trueの場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。 |
| Attribute | auto-grow |
| Type | boolean |
| Default | false |
autocapitalize
| Description | テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプションoff", "none", "on", "sentences", "words", "characters"`. |
| Attribute | autocapitalize |
| Type | string |
| Default | 'none' |
autofocus
| Description | この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。 |
| Attribute | autofocus |
| Type | boolean |
| Default | false |
clearOnEdit
| Description | trueの場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは type が "password" のとき true で、それ以外のときは false です。 |
| Attribute | clear-on-edit |
| Type | boolean |
| Default | false |
color
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
cols
| Description | テキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。 |
| Attribute | cols |
| Type | number ｜ undefined |
| Default | undefined |
debounce
| Description | キーを押すたびに ionChange イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは ngModel や v-model などのフォームバインディングにも影響します。 |
| Attribute | debounce |
| Type | number |
| Default | 0 |
disabled
| Description | trueの場合、ユーザはテキストエリアと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
enterkeyhint
| Description | どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter", "done", "go", "next", "previous", "search", and "send"`. |
| Attribute | enterkeyhint |
| Type | "done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined |
| Default | undefined |
inputmode
| Description | どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none", "text", "tel", "url", "email", "numeric", "decimal", and "search"`. |
| Attribute | inputmode |
| Type | "decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined |
| Default | undefined |
maxlength
| Description | type属性の値が text, email, search, password, tel, または url の場合、この属性はユーザーが入力できる最大文字数を指定します。 |
| Attribute | maxlength |
| Type | number ｜ undefined |
| Default | undefined |
minlength
| Description | type属性の値が text, email, search, password, tel, または url の場合、この属性はユーザーが入力できる最小文字数を指定します。 |
| Attribute | minlength |
| Type | number ｜ undefined |
| Default | undefined |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
name
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
placeholder
| Description | 入力が値を持つ前に表示される指示文。 |
| Attribute | placeholder |
| Type | string ｜ undefined |
| Default | undefined |
readonly
| Description | trueの場合、ユーザーは値を変更することができません。 |
| Attribute | readonly |
| Type | boolean |
| Default | false |
required
| Description | trueの場合、ユーザーはフォームを送信する前に値を入力する必要があります。 |
| Attribute | required |
| Type | boolean |
| Default | false |
rows
| Description | コントロールの可視テキスト行数。 |
| Attribute | rows |
| Type | number ｜ undefined |
| Default | undefined |
spellcheck
| Description | trueの場合、その要素のスペルチェックと文法チェックが行われる。 |
| Attribute | spellcheck |
| Type | boolean |
| Default | false |
value
| Description | textareaの値です。 |
| Attribute | value |
| Type | null ｜ string ｜ undefined |
| Default | '' |
wrap
| Description | コントロールがテキストをどのように折り返すかを示します。 |
| Attribute | wrap |
| Type | "hard" ｜ "off" ｜ "soft" ｜ undefined |
| Default | undefined |
Events
| Name | Description |
|---|---|
ionBlur | Inputのフォーカスが外れたときに発行されます。 |
ionChange | 入力値が変化したときに発行されます。 |
ionFocus | Inputにフォーカスが当たったときに発行されます。 |
ionInput | キーボード入力が発生したときに発します。 |
Methods
getInputElement
| Description | 要素の内部で使用されるネイティブの <textarea> 要素を返します。 |
| Signature | getInputElement() => Promise<HTMLTextAreaElement> |
setFocus
| Description | ion-textareaのネイティブtextareaにフォーカスを設定します。グローバルなtextarea.focus()` の代わりに、このメソッドを使用します。 |
| Signature | setFocus() => Promise<void> |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--background | textareaの背景 |
--border-radius | テキストエリアの境界半径 |
--color | 本文の色 |
--padding-bottom | テキストエリアのBottom Padding |
--padding-end | テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。 |
--padding-start | textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。 |
--padding-top | textareaのTop Padding |
--placeholder-color | Placeholderテキストの色 |
--placeholder-font-style | Placeholderテキストのスタイル |
--placeholder-font-weight | Placeholderテキストの重さ |
--placeholder-opacity | Placeholderテキストの不透明度 |
Slots
No slots available for this component.