# textarea
A multi-line text input box component that the user can interact with via the keyboard.

## Properties
### Basic properties

| **Parameter**      | **Data type**                      | **Default value** | **Required** | **Description**     |
| ----------- | --------------------------- | ------- | ------ | ---------- | ---------- |
| value | string | '' | no | Initial value of the input box | PC 1.0.0 |
| placeholder | string | '' | no | Placeholder | PC 1.0.0 |
| disabled | boolean | false | no | Disable input | PC 1.0.0 |
| maxlength | number | 140 | no | Maximum input length | PC side 1.0.0 |
| focus | boolean | false | no | Get focus automatically | PC 1.0.0 |
| cursor | number | -1 | No | Specifies the position of the cursor when focusing (not supported on mobile terminal) | PC terminal 1.0.0 |
| bindinput | (event: InputEvent) => void | - | no | Triggered by keyboard input | PC 1.0.0 |
| bindfocus | (event: FocusEvent) => void | - | No | Fired when the input box gets focus | PC 1.0.0 |
| bindblur | (event: BlurEvent) => void | - | no | Fired when input box loses focus | PC 1.0.0 |

### Extended properties
#### InputEvent

Inherited from [BaseEvent](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/block-frame/view-layer/event-system), the following are extended attributes.

| **Parameter** | **Data type** | **Description** |
| --------- | ------ | ---------- | ---------- |
| detail | object | Additional information | PC 1.0.0 |
|  ∟ value | string | The value of the current input box | PC 1.0.0 |
|  ∟ cursor | number | Cursor position of the current input box (not supported on mobile terminal) | PC terminal 1.0.0 |

#### FocusEvent

Inherited from [BaseEvent](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/block-frame/view-layer/event-system), the following are extended attributes.

| **Parameter** | **Data type** | **Description** |
| -------- | ------ | ------- | ------------ |
| detail | object | Additional information | PC 1.0.0 |
|  ∟ value | string | The value of the current input box | PC 1.0.0 |
| ∟ height | string | Keyboard height | PC 1.0.0 |

#### BlurEvent

Inherited from [BaseEvent](https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/block-frame/view-layer/event-system), the following are extended attributes.

| **Parameter** | **Data type** | **Description** |
| -------- | ------ | ------- | ------------ |
| detail | object | Additional information | PC 1.0.0 |
|  ∟ value | string | The value of the current input box | PC 1.0.0 |

## Notes
> When there are other input components, you need to actively close the focus property to avoid cursor offset.

## Sample code
<md-block>
<md-block-entity>
{
    "blockID": "mock-blockID", 
	"blockTypeID": "blk_610a0f3659c04004c56b2b90", 
    "sourceMeta": {

}, 
    "sourceData": {
    	"tab": "component",
    	"item": "textarea",
    	"isNew": true
    }
}
</md-block-entity>
 <md-block-appLink>
{
    "openDetail": 1, 
    "title": "textarea", 
    "list_page_url": "https://applink.feishu.cn/client/block/workplace/open?appId=cli_a00834ec56f8d01b%26blockTypeId=blk_610a40455f800004c32b6bb6%26sourceData=%7B%22tab%22%3A%22component%22%2C%22item%22%3A%22getSystemInfo%22%7D", 
    "min_lk_ver": {
        "pc": "5.10.0", 
        "mobile": "5.11.0"
    },
    "blockEntity": {
        "sourceData": {
            "type": "component",
            "item": "textarea",
            "isNew": true
        },
  		"blockID": "mock-block"
    }
}
</md-block-appLink>
<md-block-item type="TTML">
```html
<view scroll-y style="height: 600px; width: 100%; background-color: rgba(31, 35, 41, 0.05);">
  <view style="padding-bottom: 0" class="content m-content">
    <view>
      <text class="m-content-title-font">textarea</text>
    </view>
  </view>
  <view style="padding: 0 0 40px; box-sizing: border-box;" class="content m-content">
    <view tt:for="{{commonData.elements}}"  style="width: 100%; display: flex; flex-direction: column;">
      <view style="padding-top: 16px; padding-bottom: 5px; padding-left: 16px; padding-right: 16px;" class="sub-title">
        <text class="sub-title-font m-sub-title-font">{{commonData.textLabel[item.title]}}</text>
      </view>
      <view style="width: 100%">
        <textarea class="textarea-content m-textarea-content" focus="{{item.focus}}" placeholder="{{commonData.textLabel[item.placeholder]}}" placeholder-color="rgba(143, 149, 158, 1)"></textarea>
      </view>
    </view>
  </view>
</view>
```
</md-block-item>
<md-block-item type="TTSS">
```css
.content {
  padding: 40px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.m-content {
  padding: 24px 16px 0;
}

.m-content-title-font {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.m-sub-title-font {
  font-size: 16px;
}

.sub-title-font {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 22px;
}

.content-title {
  margin-bottom: 8px;
}

.content-title-font {
  font-size: 30px;
  font-weight: bold;
}

.m-textarea-content {
  width: 100%;
  padding: 13px 16px;
  max-width: unset;
  border-left: 0px solid rgba(0, 0, 0, 0);
  border-right: 0px solid rgba(0, 0, 0, 0);
  font-size: 16px;
}

.textarea-content {
  max-width: 540px;
  height: 92px;
  border-radius: 4px;
  background-color: #FFF;
}

```
</md-block-item>
<md-block-item type="JS">

```javascript
Block({
  data:{
    commonData: {
      textLabel: {
        'input_auto_focus': 'Auto focus',
         'input_auto_placheholder': 'Input area auto focus',
         'textarea_height_fixed': 'Height fixed',
         'textarea_height_fixed_placheholder': 'The height of the input area is fixed, and a scroll bar will appear beyond this height'
      },
      elements: [{
        title: 'input_auto_focus',
        placeholder: 'input_auto_placheholder',
        focus: true,
      }, {
        title: 'textarea_height_fixed',
        placeholder: 'textarea_height_fixed_placheholder',
      }]
    }
  },
  onLoad(){
    tt.hideBlockLoading();
  }
})
```
</md-block-item>
</md-block>