多行输入框。该组件是原生组件，使用时请注意相关限制
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | string | 输入框的初始内容 | ||
| placeholder | string | 输入框为空时占位符 | ||
| placeholder-style | string | 指定 placeholder 的样式，目前仅支持color,font-size和font-weight | ||
| placeholder-class | string | textarea-placeholder | 指定 placeholder 的样式类 | |
| disabled | boolean | false | 是否禁用 | |
| maxlength | number | 140 | 最大输入长度，设置为 -1 的时候不限制最大长度 | |
| auto-focus | boolean | false | 自动聚焦，拉起键盘 | |
| focus | boolean | false | 获取焦点 | |
| auto-height | boolean | false | 是否自动增高，设置auto-height时，style.height不生效 | |
| cursor | number | 指定focus时的光标位置 | ||
| selection-start | number | -1 | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | |
| selection-end | number | -1 | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | |
| bindinput | eventhandle | 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，处理函数可以直接 return 一个字符串，将替换输入框的内容 | ||
| bindfocus | eventhandle | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | ||
| bindblur | eventhandle | 输入框失去焦点时触发，event.detail = { value, encryptedValue, encryptError } |
<view class="container">
<view class="body">
<view class="page-section">
<view class="page-section-title page-section-title-space">输入区域高度自适应，不会出现滚动条</view>
<view class="textarea-wrp">
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="输入框" value="{{value}}" bindinput="handleInput" />
<text>用户输入：{{value}}</text>
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">这是一个可以自动聚焦的textarea</view>
<view class="textarea-wrp">
<textarea focus="{{isFocus}}" bindfocus="handleSwitchFocus" bindblur="handleSwitchBlur" style="height: 3em;" placeholder="输入框" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">占位符颜色可调</view>
<view class="textarea-wrp">
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="输入框" placeholder-style="color:red;" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">disabled禁用输入框</view>
<view class="textarea-wrp">
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="输入框" disabled />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">最大输入长度，设置为 -1 的时候不限制最大长度</view>
<view class="textarea-wrp">
<textarea auto-height placeholder="最大输入5个字符" maxlength="5" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">固定位置，如果设置了 css 样式position:fixed，需要将改属性设置为 true </view>
<view class="textarea-wrp">
<textarea auto-height placeholder="固定位置" fixed />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">指定软键盘弹出时，与光标的距离是多少，单位是 px</view>
<view class="textarea-wrp">
<textarea auto-height placeholder="指定键盘弹出时与光标距离" cursor-spacing="20px" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">指定 focus 时的光标位置</view>
<view class="textarea-wrp">
<textarea auto-height placeholder="指定 focus 时的光标位置" cursor="20px" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">selection-start指定 focus 时选中片段的起始位置 selection-end指定 focus 时选中片段的结束位置 </view>
<view class="textarea-wrp">
<textarea auto-height placeholder="selection-start selection-end" selection-start="20px;" selection-end="20px;" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">输入框聚焦时触发</view>
<view class="textarea-wrp">
<textarea auto-height placeholder="输入框聚焦时触发" bindfocus="handleFocus" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">失去焦点</view>
<view class="textarea-wrp">
<textarea auto-height placeholder="输入框失去焦点时触发" bindblur="handleBlur" />
</view>
</view>
<view class="page-section">
<view class="page-section-title page-section-title-space">用户点击键盘的完成按钮时触发</view>
<view class="textarea-wrp">
<textarea auto-height placeholder="用户点击键盘的完成按钮时触发" bindconfirm="handleConfirm" />
</view>
</view>
</view>
</view>