スクリプト開発向けタグライブラリ

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（値を直接指定）
  • テキストエリアにはvalueと表示されます。
HTML
<imart type="imuiTextArea" value="テキストエリア" />

value（値を変数で指定）

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

autofocus

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

body部

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

parentSelector

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

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>

Copyright © 2012 NTT DATA INTRAMART CORPORATION