ion-input-otp
Properties
autocapitalize
| Description | テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション: "off", "none", "on", "sentences", "words", "characters". |
| Attribute | autocapitalize |
| Type | string |
| Default | 'off' |
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 |
disabled
| Description | trueの場合、ユーザはInputと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
fill
| Description | 入力ボックスの塗りつぶし。"solid" の場合は背景色が付き、"outline" の場合は枠線付きで透過表示になります。 |
| Attribute | fill |
| Type | "outline" ｜ "solid" ｜ undefined |
| Default | 'outline' |
inputmode
| Description | どのキーボードを表示するかのブラウザへのヒント。指定可能な値は "none", "text", "tel", "url", "email", "numeric", "decimal", "search"。数値入力（type="number"）には "numeric"、テキスト（type="text"）には "text" を使用します。 |
| Attribute | inputmode |
| Type | "decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined |
| Default | undefined |
length
| Description | 表示する入力ボックスの数。 |
| Attribute | length |
| Type | number |
| Default | 4 |
pattern
| Description | 許可される文字の正規表現パターン文字列。型に応じたデフォルトがあります。数値（type="number"）は "[\p{N}]"、テキスト（type="text"）は "[\p{L}\p{N}]"。 |
| Attribute | pattern |
| Type | string ｜ undefined |
| Default | undefined |
readonly
| Description | trueの場合、ユーザーは値を変更することができません。 |
| Attribute | readonly |
| Type | boolean |
| Default | false |
separators
| Description | 入力ボックス間に区切り線を表示する場所。カンマ区切り文字列または数値配列で指定できます。例: "3" は 3 番目の入力ボックスの後に区切りを表示、[1,4] は 1 番目と 4 番目の後に表示、"all" はすべての入力ボックス間に表示します。 |
| Attribute | separators |
| Type | number[] ｜ string ｜ undefined |
| Default | undefined |
shape
| Description | 入力ボックスの形状。"round" は角の丸みを大きくし、"rectangular" は角丸なし、"soft" はやわらかい角丸になります。 |
| Attribute | shape |
| Type | "rectangular" ｜ "round" ｜ "soft" |
| Default | 'round' |
size
| Description | 入力ボックスのサイズ。 |
| Attribute | size |
| Type | "large" ｜ "medium" ｜ "small" |
| Default | 'medium' |
type
| Description | 入力ボックスに許可される入力種別。 |
| Attribute | type |
| Type | "number" ｜ "text" |
| Default | 'number' |
value
| Description | 入力グループの値。 |
| Attribute | value |
| Type | null ｜ number ｜ string ｜ undefined |
| Default | '' |
Events
| Name | Description |
|---|---|
ionBlur | 入力グループのフォーカスが外れたときに発行されます。 |
ionChange | ユーザーが入力値を変更したときに ionChange イベントが発生します。ionInput と異なり、ionChange は入力途中ではなく変更が確定したときにのみ発生します。<ion-input-otp> の値が変更された後にフォーカスを失ったときにも発生します。プログラムで value を設定した場合には発生しません。 |
ionComplete | すべての入力ボックスが有効な値で埋められたときに発行されます。 |
ionFocus | 入力グループにフォーカスが当たったときに発行されます。 |
ionInput | ionInput イベントは、ユーザが入力値を変更するたびに発生する。ionChange イベントとは異なり、 ionInput イベントは入力値が変更されるたびに発生する。これは通常、ユーザが入力を行うたびに発生します。 テキスト入力を受け付ける要素(type=text, type=telなど)の場合、インターフェイスはInputEventとなります。その他の要素の場合、インターフェイスはEventとなります。編集時に入力がクリアされる場合、型は null となる。 |
Methods
setFocus
| Description | 任意の入力ボックスにフォーカスを設定します。 |
| Signature | setFocus(index?: number) => Promise<void> |
CSS Custom Properties
| Name | Description |
|---|---|
--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 | 入力ボックスの幅 |