imuiTextArea
コンポーネント情報 | |
---|---|
モジュール | im_ui |
導入されたバージョン | 8.0.0 |
バージョン | 8.0.21 |
機能説明
- テキストエリアを作成します。
属性一覧
注釈 | 属性名 | 型 | 説明 | 省略時の動作 |
---|---|---|---|---|
HTML5
Boolean属性
|
autofocus |
boolean | 画面表示時に、テキストエリアにフォーカスをあてます | false |
Boolean属性 | borderBox |
Boolean | テキストエリアの横幅および縦幅を、paddingと borderの幅を要素の幅と高さに含めて算出します。 本属性はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
false |
cols |
number | テキストエリアの一行あたりの文字数の期待する最大数を指定します | - | |
Boolean属性 | disabled |
boolean | テキストエリアを無効化します | false |
無害化 | height |
string | テキストエリアの縦幅を指定します 指定できる単位は「px」「%」 「vh」です 単位に「%」または「vh」を設定した場合、以下を基準として相対的な高さ指定します 「%」を指定した場合、ウィンドウの高さからヘッダとフッタを引いた領域を基準とします 「vh」を指定した場合、ウィンドウの高さを基準とします 「%」「vh」指定はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
- |
HTML5
Boolean属性
|
hidden |
boolean | テキストエリアを非表示にします | false |
id |
string | テキストエリアのidです | 代替idを付与 | |
maxHeight |
string | テキストエリアの縦幅の上限を指定します 単位は「px」を指定してください 「px」以外の単位を指定した場合は無視されます 本属性はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
- | |
maxWidth |
string | テキストエリアの横幅の上限を指定します 単位は「px」を指定してください 「px」以外の単位を指定した場合は無視されます 本属性はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
- | |
HTML5
|
maxlength |
number | テキストエリアに入力できる最大文字数を指定します | - |
minHeight |
string | テキストエリアの縦幅の下限を指定します 単位は「px」を指定してください 「px」以外の単位を指定した場合は無視されます 本属性はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
- | |
minWidth |
string | テキストエリアの横幅の下限を指定します 単位は「px」を指定してください 「px」以外の単位を指定した場合は無視されます 本属性はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
- | |
name |
string | テキストエリアのnameです | 代替nameを付与 | |
無害化 | parentSelector |
string | height属性で高さを計算する算出元の要素をjQueryセレクタで指定します idなら“#id”、classなら“.class”と指定してください 単位に「vh」を指定した場合、parentSelector 属性の指定は無視されます 未指定の場合、ウィンドウの高さからフッタとヘッダを取り除いた領域が設定されます height 属性が未指定の場合は無視されます 本属性はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
ウィンドウの高さからヘッダとフッタを引いた領域 |
HTML5
国際化
無害化
|
placeholder |
string | テキストエリアに初期表示する内容を指定します | - |
Boolean属性 | readonly |
boolean | テキストエリアの編集を不可にして読み取り専用にします | false |
HTML5
Boolean属性
|
required |
boolean | テキストエリアの入力を必須にします | false |
rows |
number | テキストエリアの表示行数を指定します | - | |
無害化 | value |
string | テキストエリアに表示する文字列を指定します | - |
無害化 | width |
string | テキストエリアの横幅を指定します 指定できる単位は「px」「%」「vw」です 単位に「%」または「vw」を設定した場合、ウィンドウを基準として相対的な横幅を指定します 「%」「vh」指定はintra-mart Accel Platform 2018 Winter(8.0.21)(UI基本モジュールバージョン 8.0.21)から利用可能です |
- |
無害化 | その他 |
string | ユーザ定義属性です | - |
サンプル
value(値を直接指定)

- テキストエリアにはvalueと表示されます。
HTML
<imart type="imuiTextArea" value="テキストエリア" />
value(値を変数で指定)

- サーバサイドJavaScriptで宣言した変数を、タグのvalue属性に指定します。
サーバサイド JavaScript
var sapmleValue = 'テキストエリア';
HTML
<imart type="imuiTextArea" value=sapmleValue />
autofocus

HTML
<imart type="imuiTextArea" value="テキストエリア" autofocus="true" />
body部

- ボディ部とはimartタグに囲まれた部分を指します。
注釈 | 説明 | 省略時の動作 |
無害化 | テキストエリアに表示する文字列です valueと同時指定された場合は、ボディ部に書いた文字列が優先されます バインド変数は使えません | - |
HTML
<imart type="imuiTextArea" >ボディ部</imart>
parentSelector

- dialog 内の textArea を配置し、ダイアログのリサイズでテキストエリアの高さ(横幅)が変わるサンプルです
- parentSelector 属性にダイアログの id を指定しています。そのためウィンドウのリサイズではなく、ダイアログのリサイズでテキストエリアの高さ(横幅)も動的にリサイズされます
- height に50%、width に50%を指定しているので、ダイアログの要素に対して50%表示を行います
HTML
<imart type="imuiDialog" id="dialog"> <imart type="imuiTextArea" parentSelector="#dialog" height="50%" width="50%" /> </imart>
maxHeight, maxWidth
- テキストエリアの高さと横幅に上限値を設定した場合のサンプルです
- ウィンドウをリサイズしたときに、高さが200pxまではリサイズされますが、200pxを超える値にはリサイズされません
- ウィンドウをリサイズしたときに、横幅が400pxまではリサイズされますが、400pxを超える値にはリサイズされません
- minHeight, minWidthを指定した場合は、下限値が同様に設定されます
HTML
<imart type="imuiTextArea" height="25%" width="25%" maxHeight="200px" maxWidth="400px" />
borderBox

- テーブルのセル内にテキストエリアを横幅100%で配置した場合のサンプルです
- 上記の場合、テキストエリアがテーブルの枠を超えて表示されることがあります
- borderBox属性をtrueで設定することで、テキストエリアの幅をテーブル枠内に収めることができます
JSSP
<table class="imui-table"> <tbody> <tr> <th>タイトル行</th> </tr> <tr> <td> <imart type="imuiTextArea" width="100%" borderBox="true" /> </td> </tr> </tbody> </table>