テキストエリア入力

InputTextarea は、標準的なテキストエリア要素にスタイルと自動サイズ調整機能を追加します。

インポート#


import { InputTextarea } from 'primereact/inputtextarea';
         

基本#

テキストエリアは、value プロパティと onChange プロパティを使用して制御された入力として使用されます。


<InputTextarea value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
         

自動サイズ調整#

autoResize が有効になっている場合、テキストエリアはスクロールバーを表示する代わりにサイズが変更されます。


<InputTextarea autoResize value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
         

キーフィルター#

InputTextarea は、特定のキーをブロックする組み込みのキーフィルタリング機能を備えています。詳細については、キーフィルターページを参照してください。


<InputTextarea keyfilter="int" placeholder="Integers" rows={5} cols={30} />
         

フロートラベル#

フォーカスされると、入力フィールドの上部にフロートラベルが表示されます。詳細については、フロートラベルのドキュメントを参照してください。


<FloatLabel>
    <InputTextarea id="username" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
    <label htmlFor="username">Username</label>
</FloatLabel>
         

塗りつぶし#

variant プロパティをfilledに指定して、デフォルトのoutlinedスタイルよりも視覚的に強調されたコンポーネントを表示します。


<InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
         

無効#

invalidプロパティを使用して無効状態を表示し、検証の失敗を示します。フォーム検証ライブラリと統合する際にこのスタイルを使用できます。


<InputTextarea invalid rows={5} cols={30} />
         

無効#

disabledが存在する場合、要素は編集およびフォーカスできません。


<InputTextarea disabled rows={5} cols={30} />
         

アクセシビリティ#

スクリーンリーダー

InputTextareaコンポーネントは、渡されたプロパティを暗黙的に含むネイティブなテキストエリア要素をレンダリングします。コンポーネントの説明は、idプロパティと組み合わせたlabelタグ、または aria-labelledby、aria-labelプロパティを使用して指定できます。


<label htmlFor="address1">Address 1</label>
<InputTextarea id="address1" />

<span id="address2">Address 2</span>
<InputTextarea aria-labelledby="address2" />

<InputTextarea aria-label="Address Details"/>
     

キーボードサポート

キー機能
tab入力にフォーカスを移動します。
                    PrimeReact 10.8.3 by PrimeTek