この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:input

type 属性に応じてユーザ入力を受け入れる対話型コントロールを表します。

lightning:input コンポーネントは HTML input 要素を作成します。このコンポーネントは、HTML5 の入力種別である email、password、tel、url、number、checkbox、toggle、radio、date、datetime をサポートしています。デフォルトは text です。

lightning:input には、placeholder、maxlength、minlength、pattern など、HTML と同等の属性があります。数値入力を操作する場合は、max,min,step などの属性を使用できます。チェックボックス、切り替えボタン、ラジオボタンを操作する場合は、checked 属性を使用して選択された状態を定義できます。

たとえば、最大長を設定するには maxlength 属性を使用します。

1<lightning:input name="quantity" value="1234567890" label="Quantity" maxlength="10" />

数値入力をパーセントまたは通貨として書式設定するには、formatter をそれぞれ percent または currency に設定します。

1<lightning:input type="number" name="ItemPrice" 
2    label="Price" value="12345" formatter="currency"/>

onblur、onfocus、onchange などの入力イベントに対してクライアント側のコントローラを定義できます。たとえば、コンポーネントの値が変更された場合にコンポーネントの変更イベントを処理するには、onchange 属性を使用します。

入力規則

このコンポーネントでは、クライアント側で入力規則が使用できます。たとえば、url または email の入力種別に対して URL やメールアドレスを入力する必要がある場合にエラーメッセージが表示されます。

入力の有効性状態を確認するには、ValidityState オブジェクトに基づく validity 属性を使用します。有効性状態にはクライアント側コントローラでアクセスできます。ユーザが入力要素の操作をまだ行っていない場合には、null が返されます。それ以外の場合は、次の boolean プロパティを持つオブジェクトが返されます。

badInput: 値が無効であることを示します
patternMismatch: 値が指定されたパターンに一致していないことを示します。
rangeOverflow: 値が指定された max 属性よりも大きいことを示します。
rangeUnderflow: 値が指定された min 属性よりも小さいことを示します。
stepMismatch: 値が指定された step 属性に一致していないことを示します。
tooLong: 値が指定された maxlength 属性を超えていることを示します。
typeMismatch: 値がメールまたは url 入力種別の所定の構文に一致していないことを示します。
valueMissing: required 属性が true に設定されている場合に、空の値が指定されたことを示します。

エラーメッセージ

入力規則の検証に失敗した場合、デフォルトで次のメッセージが表示されます。

badInput: 有効な値を入力してください。
patternMismatch: エントリは許可されているパターンと一致しません。
rangeOverflow: 数値が高すぎます。
rangeUnderflow: 数値が低すぎます。
stepMismatch: エントリは有効な増分ではありません。
tooLong: エントリが長すぎます。
typeMismatch: 無効な形式を入力しました。
valueMissing: この項目を入力してください。

次の属性に独自の値を指定することでデフォルトのメッセージを上書きできます: messageWhenBadInput、messageWhenPatternMismatch、messageWhenTypeMismatch、messageWhenValueMissing、messageWhenRangeOverflow、messageWhenRangeUnderflow、messageWhenStepMismatch、messageWhenTooLong。

たとえば、入力が 5 文字未満の場合にカスタムエラーメッセージを表示します。

1<lightning:input name="firstname" label="First Name" minlength="5" 
2    messageWhenBadInput="Your entry must be at least 5 characters." />

アクセシビリティ

アクセシビリティのためのテキスト表示ラベルを指定して、情報が支援技術で使用できるようにする必要があります。label 属性は、入力コンポーネントの HTML label 要素を作成します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

focus(): フォーカスを要素に設定します。

属性

属性名	属性型	説明	必須項目
`accesskey`	String	要素の有効化またはフォーカス設定のためのショートカットキーを指定します。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`checked`	Boolean	チェックボックスをオンにするかどうかを指定します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`disabled`	Boolean	入力要素を無効にするかどうかを指定します。この値のデフォルトは false です。
`formatter`	String	使用するフォーマッタを伴う文字列値。
`label`	String	入力のテキスト表示ラベル。	はい
`max`	BigDecimal	浮動小数点数の値の上限。
`maxlength`	Integer	項目内で使用できる最大文字数。
`messageWhenBadInput`	String	不正な入力が検出された場合に表示されるエラーメッセージ。
`messageWhenPatternMismatch`	String	パターンの不一致が検出された場合に表示されるエラーメッセージ。
`messageWhenRangeOverflow`	String	範囲を超えたことが検出された場合に表示されるエラーメッセージ。
`messageWhenRangeUnderflow`	String	範囲を下回ったことが検出された場合に表示されるエラーメッセージ。
`messageWhenStepMismatch`	String	ステップの不一致が検出された場合に表示されるエラーメッセージ。
`messageWhenTooLong`	String	値が長すぎる場合に表示されるエラーメッセージ。
`messageWhenTypeMismatch`	String	種別の不一致が検出された場合に表示されるエラーメッセージ。
`messageWhenValueMissing`	String	値がない場合に表示されるエラーメッセージ。
`min`	BigDecimal	浮動小数点数の値の下限。
`minlength`	Integer	項目内で使用できる最小文字数。
`name`	String	入力要素の名前を指定します。	はい
`onblur`	Action	要素がフォーカスを解放したときにトリガされるアクション。
`onchange`	Action	値属性が変更された場合にトリガされるアクション。
`onfocus`	Action	要素にフォーカスが設定されたときにトリガされるアクション。
`pattern`	String	入力値をチェックする正規表現を指定します。この属性は、text、date、search、url、tel、email、password の種別でサポートされます。
`placeholder`	String	項目が空の場合に、ユーザに有効な入力を求めるためのテキスト。
`readonly`	Boolean	入力項目が参照のみであることを指定します。この値のデフォルトは false です。
`required`	Boolean	フォームを送信する前に入力項目が入力されている必要があることを指定します。この値のデフォルトは false です。
`step`	BigDecimal	正の浮動小数点の値の粒度。
`tabindex`	Integer	要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。
`type`	String	入力の種別。この値のデフォルトは text です。
`validity`	Object	制約検証に対して要素が取ることのできる有効性状態を表します。
`value`	Object	入力要素の値を指定します。

Lightning コンポーネント開発者ガイド

lightning:input

属性