Class HyloInput

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

It turns off the input 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 input field is not turned off during a page change, a screen reader might set focus to the input 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 input field might also occur at DOM manipulations. Fire the events "hyloInputOff" and "hyloInputOn" to disable the input 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 input field.

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

Properties

accept addValueToLabel autocapitalize autocomplete autocorrect autofocus clearInput clearOnEdit clearStyle color debounce disabled dontAriaHideIonLabel dontListenToRouter errorMessageId fractionDigits inputClass inputId inputLabel inputmode invalid labelAddendum labelId locales max maxlength min minlength multiple name pageLoadedDelay pattern placeholder prependInput readonly required size spellcheck step textInvalid textPrependValueInLabel textValid type value

Methods

getInputElement getIonInputElement getValue setFocus setValue turnOff turnOn

Events

hyloChange hyloChanged hyloEnter hyloHasFocus

Properties

accept

accept: string

Same as ion-input.

addValueToLabel

addValueToLabel: boolean

Adds the current value to the aria-label. Helps if the screen reader has problems to read the actual value.

autocapitalize

autocapitalize: string = 'off'

Same as ion-input.

autocomplete

autocomplete: "off" | "on" = 'off'

Same as ion-input.

autocorrect

autocorrect: "off" | "on" = 'off'

Same as ion-input.

autofocus

autofocus: boolean = false

Same as ion-input.

clearInput

clearInput: boolean = false

Same as ion-input.

clearOnEdit

clearOnEdit: boolean

Same as ion-input.

clearStyle

clearStyle: boolean

Sets the height of the wrapped ion-input and input elements to 100%. Sets --padding-start, --padding-end, --padding-top, --padding-bottom to 0.

color

color: string

Same as ion-input.

debounce

debounce: number = 0

Same as ion-input.

disabled

disabled: boolean = false

Same as ion-input.

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.

fractionDigits

fractionDigits: number

Sets the digits after decimal sign when the type="number".

inputClass

inputClass: string = ''

Classes added to the wrapped input field.

inputId

inputId: string

The id of the actual input element.

inputLabel

inputLabel: string

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

inputmode

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

Same as ion-input.

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 input 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 inputLabel is not set, the attribute aria-labelledby will be set accordingly.

locales

locales: string = 'de'

The locales setting for formatting the value for the aria-label and aria-valuenow. Currently just used for type="number".

max

max: string

Same as ion-input.

maxlength

maxlength: number

Same as ion-input.

min

min: string

Same as ion-input.

minlength

minlength: number

Same as ion-input.

multiple

multiple: boolean

Same as ion-input.

name

name: string

Same as ion-input.

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.

pattern

pattern: string

Same as ion-input.

placeholder

placeholder: string

Same as ion-input.

prependInput

prependInput: string

Puts the text in front of the input element.

readonly

readonly: boolean = false

Same as ion-input.

required

required: boolean = false

Same as ion-input.

size

size: number

Same as ion-input.

spellcheck

spellcheck: boolean = false

Same as ion-input.

step

step: string

Same as ion-input.

textInvalid

textInvalid: string = 'Ungültige Eingabe'

Text for screen readers to indicate that the value is invalid. Used for type="number" since screen reader implementation is buggy.

Checks hylo-page-root's translation object for "formInvalidLabel".

textPrependValueInLabel

textPrependValueInLabel: string = 'Derzeitiger Wert: '

Text prepended the value when the value is added to the aria-label.

Checks hylo-page-root's translation object for "formValueIsLabel".

textValid

textValid: string = 'Gültige Eingabe'

Text for screen readers to indicate that the value is valid. Used for type="number" since screen reader implementation is buggy.

Checks hylo-page-root's translation object for "formValidLabel".

type

type: "number" | "search" | "time" | "text" | "reset" | "submit" | "url" | "email" | "tel" | "date" | "password" = 'text'

Same as ion-input.

value

value: string = ''

Same as ion-input.

Methods

getInputElement

  • getInputElement(): Promise<HTMLInputElement>

  • Same as ion-input.

    Returns Promise<HTMLInputElement>

getIonInputElement

  • getIonInputElement(): Promise<HTMLIonInputElement>

  • Returns the wrapped ion-input component.

    Returns Promise<HTMLIonInputElement>

getValue

  • getValue(): Promise<string | number>

  • Returns the value of the wrapped ion-input component.

    Returns Promise<string | number>

setFocus

  • setFocus(): Promise<void>

  • Same as ion-input.

    Returns Promise<void>

setValue

  • setValue(value): Promise<void>

  • Sets the value of the wrapped ion-input component.

    Parameters

    • value: string

    Returns Promise<void>

turnOff

  • turnOff(): Promise<void>

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

    Returns Promise<void>

turnOn

  • turnOn(): Promise<void>

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

    Returns Promise<void>

Events

hyloChange

hyloChange: EventEmitter<any>

Fires when a change of the value occurred (every character).

hyloChanged

hyloChanged: EventEmitter<any>

Fires when the value changed.

hyloEnter

hyloEnter: EventEmitter<any>

Fires when the "enter" key gets hit while having the focus.

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