Class HyloTextarea

Basicly the same as ion-textarea. In fact, it wraps an ion-textarea component. It adds more compatibility for screen readers to the textarea field.

It turns off the textarea field during a page change by adding aria-hidden="true". To do so it listens for "hyloRouteWillChange" and "hyloRouteDidChange" of the hylo-router component.

If the textarea field is not turned off during a page change, a screen reader might set focus to the textarea field while changing the page. You can turn off the listeners by using the property "dontListenToRouter" and fire the events "hyloInputOn", "hyloInputOff" on your own.

The unwanted focus shift to the textarea field might also occure at DOM manipulations. Fire the events "hyloInputOff" and "hyloInputOn" to disable the textarea field and enable it after the DOM manipulation is done.

The events "hyloInputOn" and "hyloInputOff" are fired also by other components to prevent the screen reader to shift focus to the textarea field.

Fire the events "hyloInputOn" and "hyloInputOff" on the window object on your own to control the aria-hidden property of all hylo-textarea components.

Properties

autoGrow autocapitalize autofocus clearOnEdit color cols debounce disabled dontAriaHideIonLabel dontListenToRouter errorMessageId inputmode invalid labelAddendum labelId maxlength minlength mode name pageLoadedDelay placeholder readonly required rows spellcheck textareaId textareaLabel value wrap

Methods

getInputElement getIonTextareaElement setFocus turnOff turnOn

Events

hyloHasFocus

Properties

autoGrow

autoGrow: boolean = false

Same as ion-textarea.

autocapitalize

autocapitalize: string = 'none'

Same as ion-textarea.

autofocus

autofocus: boolean = false

Same as ion-textarea.

clearOnEdit

clearOnEdit: boolean = false

Same as ion-textarea.

color

color: string

Same as ion-textarea.

cols

cols: number

Same as ion-textarea

debounce

debounce: number = 0

Same as ion-textarea.

disabled

disabled: boolean = false

Same as ion-textarea.

dontAriaHideIonLabel

dontAriaHideIonLabel: boolean

An ion-label component which is bundled with this component under an ion-item is aria-hidden by default. This setting disables the default setting. You can still set the aria-hidden attribute manually.

dontListenToRouter

dontListenToRouter: boolean = false

Turns off the listening to the router and turns on the listener for "hyloInputOn" and "hyloInputOff".

errorMessageId

errorMessageId: string

The id of an element which holds an error message for this component. The error message is only considered when the component is invalid.

inputmode

inputmode: "search" | "text" | "none" | "numeric" | "url" | "email" | "tel" | "decimal"

Same as ion-textarea.

invalid

invalid: boolean = null

If not set, the component determents its invalidation based on "required" and its value.

labelAddendum

labelAddendum: string

Text added to the aria-label of the textarea field.

labelId

labelId: string

If you bundled the component with an ion-label component under an ion-item, you can force the id of the ion-label to be this value. If textareaLabel is not set, the attribute aria-labelledby will be set accordingly.

maxlength

maxlength: number

Same as ion-textarea.

minlength

minlength: number

Same as ion-textarea.

mode

mode: "md" | "ios"

Same as ion-textarea.

name

name: string

Same as ion-textarea.

pageLoadedDelay

pageLoadedDelay: number = 5000

The delay in milliseconds the aria-hidden gets removed again after a page got loaded. A delay is probably needed to prevent the screen reader to set the focus to the input field.

Any keydown event skips the delay.

placeholder

placeholder: string

Same as ion-textarea.

readonly

readonly: boolean = false

Same as ion-textarea.

required

required: boolean = false

Same as ion-textarea.

rows

rows: number

Same as ion-textarea.

spellcheck

spellcheck: boolean = false

Same as ion-textarea.

textareaId

textareaId: string

The id of the actual textarea element.

textareaLabel

textareaLabel: string

The aria-label value given to the wrapped textarea field. If not set and no ion-label is used, the placeholder value is used.

value

value: string = ''

Same as ion-textarea.

wrap

wrap: "off" | "hard" | "soft"

Same as ion-textarea.

Methods

getInputElement

  • getInputElement(): Promise<HTMLTextAreaElement>

  • Same as ion-textarea.

    Returns Promise<HTMLTextAreaElement>

getIonTextareaElement

  • getIonTextareaElement(): Promise<HTMLIonTextareaElement>

  • Returns the wrapped ion-textarea component.

    Returns Promise<HTMLIonTextareaElement>

setFocus

  • setFocus(): Promise<void>

  • Same as ion-textarea.

    Returns Promise<void>

turnOff

  • turnOff(): Promise<void>

  • Adds aria-hidden="true" to the textarea element.

    Returns Promise<void>

turnOn

  • turnOn(): Promise<void>

  • Removes the aria-hidden attribute from the textarea element.

    Returns Promise<void>

Events

hyloHasFocus

hyloHasFocus: EventEmitter<boolean>

Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".

The emitted boolean value indicates whether the component gained or lost the focus.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc