webUrl: https://qft12m.smartapps.cn/component/textarea/textarea

title: textarea 多行输入框 header: develop nav: component sidebar: formlist_textarea

webUrl: https://qft12m.smartapps.cn/component/textarea/textarea

解释：多行输入框。客户端创建的原生组件，不支持嵌套在其它组件中使用。

属性说明

confirm-type 有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1：输入区高度自适应

在开发者工具中预览效果

:::codeTab

<view class="wrap">
    <view class="description">输入区高度自适应</view>
    <textarea auto-height maxlength="-1" bindinput="bindInput"/>
</view>

Page({
    data: {
        height: 1,
        focus: true
    },
    bindfocus(e) {
        console.log('focus - e:', e);
    },
    bindInput(e) {
        console.log('input - e:', e);
    },
    bindLineChange(e) {
        console.log('linechange - e:', e);
    },
    bindblur(e) {
        console.log('blur - e:', e);
    },
    bindConfirm(e){
        console.log('confirm - e:', e);
    }
});

:::

代码示例 2： 受控聚焦

在开发者工具中预览效果

:::codeTab

<view class="wrap">
    <view class="description">受控聚焦</view>
    <textarea style="height: 3em"
                maxlength="-1"
                disabled="{{false}}"
                auto-focus="{{true}}"
                placeholder="我会出现滚动条~"
                placeholder-class="plh"
                cursor="-1"
                confirm-type="send"
                confirm-hold="{{false}}"
                fixed="{{true}}"
                focus="{{focus}}"
                cursor-spacing="20"
                show-confirm-bar="{{true}}"
                selection-start="-1"
                selection-end="-1"
                adjust-position="{{true}}"
                bindfocus="bindFocus"
                bindblur="bindBlur"
                bindlinechange="bindLineChange"
                bindinput="bindInput"
                bindconfirm="bindConfirm"
                />
    <button type="primary" bind:tap="bindFocusTap">聚焦</button>
</view>

Page({
    data: {
        height: 1,
        focus: true
    },
    onHide() {
        getApp().globalData.openParams = ''
    },
    bindFocusTap() {
        this.setData('focus', true);
    },
    bindfocus(e) {
        console.log('focus - e:', e);
    },
    bindInput(e) {
        console.log('input - e:', e);
    },
    bindLineChange(e) {
        console.log('linechange - e:', e);
    },
    bindblur(e) {
        console.log('blur - e:', e);
    },
    bindConfirm(e){
        console.log('confirm - e:', e);
    }
});

:::

Bug & Tip

• Tip：textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
• Tip：不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
• Tip：请使用cover-view组件在 textarea 组件上开发遮罩层。