lightning:textarea

lightning:textarea コンポーネントは、複数行のテキストを入力するための HTML textarea 要素を作成します。テキストエリアは、無制限の文字数を保持できます。

rows および cols HTML 属性はサポートされていません。テキストエリアにカスタムの高さと幅を適用するには、class 属性を使用します。テキストエリアの入力を設定するには、value 属性を使用してその値を設定します。この値を設定すると、指定された最初の値は上書きされます。

次の例は、最大文字数が 300 文字のテキストエリアを作成します。

1<lightning:textarea name="myTextArea" value="initial value" 
2    label="What are you thinking about?" maxlength="300" />

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

1<lightning:textarea name="myTextArea" value="initial value" 
2    label="What are you thinking about?" onchange="{!c.countLength}" />

このコンポーネントでは、クライアント側で入力規則が使用できます。maxlength 属性を使用して最大文字数を設定するか、minlength 属性を使用して最小文字数を設定します。テキストエリアを必須項目にするには、required="true" を選択します。次の場合、エラーメッセージが自動的に表示されます。

• required が true に設定されていて必須項目が空の場合。
• 入力値が minlength 属性で指定された文字数未満の場合。
• 入力値が maxlength 属性で指定された文字数を超えている場合。

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

messageWhenValueMissing、messageWhenBadInput、または messageWhenTooLong に独自の値を指定し、デフォルトのメッセージを上書きできます。

次に例を示します。

1<lightning:textarea name="myText" required="true" label="Your Name" 
2        messageWhenValueMissing="This field is required."/>

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

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

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