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

ion-input-otp

scoped

Properties

autocapitalize

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

color

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

disabled

Descriptiontrueの場合、ユーザはInputと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

fill

Description入力ボックスの塗りつぶし。"solid" の場合は背景色が付き、"outline" の場合は枠線付きで透過表示になります。
Attributefill
Type"outline" | "solid" | undefined
Default'outline'

inputmode

Descriptionどのキーボードを表示するかのブラウザへのヒント。指定可能な値は "none", "text", "tel", "url", "email", "numeric", "decimal", "search"。数値入力(type="number")には "numeric"、テキスト(type="text")には "text" を使用します。
Attributeinputmode
Type"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined
Defaultundefined

length

Description表示する入力ボックスの数。
Attributelength
Typenumber
Default4

pattern

Description許可される文字の正規表現パターン文字列。型に応じたデフォルトがあります。数値(type="number")は "[\p{N}]"、テキスト(type="text")は "[\p{L}\p{N}]"
Attributepattern
Typestring | undefined
Defaultundefined

readonly

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

separators

Description入力ボックス間に区切り線を表示する場所。カンマ区切り文字列または数値配列で指定できます。例: "3" は 3 番目の入力ボックスの後に区切りを表示、[1,4] は 1 番目と 4 番目の後に表示、"all" はすべての入力ボックス間に表示します。
Attributeseparators
Typenumber[] | string | undefined
Defaultundefined

shape

Description入力ボックスの形状。"round" は角の丸みを大きくし、"rectangular" は角丸なし、"soft" はやわらかい角丸になります。
Attributeshape
Type"rectangular" | "round" | "soft"
Default'round'

size

Description入力ボックスのサイズ。
Attributesize
Type"large" | "medium" | "small"
Default'medium'

type

Description入力ボックスに許可される入力種別。
Attributetype
Type"number" | "text"
Default'number'

value

Description入力グループの値。
Attributevalue
Typenull | number | string | undefined
Default''

Events

NameDescription
ionBlur入力グループのフォーカスが外れたときに発行されます。
ionChangeユーザーが入力値を変更したときに ionChange イベントが発生します。ionInput と異なり、ionChange は入力途中ではなく変更が確定したときにのみ発生します。<ion-input-otp> の値が変更された後にフォーカスを失ったときにも発生します。プログラムで value を設定した場合には発生しません。
ionCompleteすべての入力ボックスが有効な値で埋められたときに発行されます。
ionFocus入力グループにフォーカスが当たったときに発行されます。
ionInputionInput イベントは、ユーザが入力値を変更するたびに発生する。ionChange イベントとは異なり、 ionInput イベントは入力値が変更されるたびに発生する。これは通常、ユーザが入力を行うたびに発生します。 テキスト入力を受け付ける要素(type=text, type=telなど)の場合、インターフェイスはInputEventとなります。その他の要素の場合、インターフェイスはEventとなります。編集時に入力がクリアされる場合、型は null となる。

Methods

setFocus

Description任意の入力ボックスにフォーカスを設定します。
SignaturesetFocus(index?: number) => Promise<void>

CSS Custom Properties

NameDescription
--background入力ボックスの背景色
--background入力ボックスの背景色
--border-color入力ボックスのボーダーカラー
--border-color入力ボックスのボーダーカラー
--border-radius入力ボックスのボーダー半径
--border-radius入力ボックスのボーダー半径
--border-width入力ボックスのボーダー幅
--border-width入力ボックスのボーダー幅
--color入力テキストの色
--color入力テキストの色
--height入力ボックスの高さ
--height入力ボックスの高さ
--highlight-color-focusedフォーカスされたときの入力のハイライトの色
--highlight-color-focusedフォーカスされたときの入力のハイライトの色
--highlight-color-invalid入力が無効な場合のハイライトの色
--highlight-color-invalid入力が無効な場合のハイライトの色
--highlight-color-valid有効時の入力のハイライトの色
--highlight-color-valid有効時の入力のハイライトの色
--margin-bottom入力グループの下マージン
--margin-bottom入力グループの下マージン
--margin-end入力グループの左右方向に応じた右/左マージン
--margin-end入力グループの左右方向に応じた右/左マージン
--margin-start入力グループの左右方向に応じた左/右マージン
--margin-start入力グループの左右方向に応じた左/右マージン
--margin-top入力グループの上マージン
--margin-top入力グループの上マージン
--min-width入力ボックスの最小幅
--min-width入力ボックスの最小幅
--padding-bottom入力グループの下パディング
--padding-bottom入力グループの下パディング
--padding-end入力グループの左右方向に応じた右/左パディング
--padding-end入力グループの左右方向に応じた右/左パディング
--padding-start入力グループの左右方向に応じた左/右パディング
--padding-start入力グループの左右方向に応じた左/右パディング
--padding-top入力グループの上パディング
--padding-top入力グループの上パディング
--separator-border-radiusボックス間セパレーターのボーダー半径
--separator-border-radiusボックス間セパレーターのボーダー半径
--separator-colorボックス間セパレーターの色
--separator-colorボックス間セパレーターの色
--separator-heightボックス間セパレーターの高さ
--separator-heightボックス間セパレーターの高さ
--separator-widthボックス間セパレーターの幅
--separator-widthボックス間セパレーターの幅
--width入力ボックスの幅
--width入力ボックスの幅