百度智能小程序 多行输入框

textarea 多行输入框

解释：多行输入框（v3.140.1 起支持 同层渲染 ），不支持嵌套在其它组件中使用。如需更多自定义样式，可使用 Smart UI 组件，详见 textarea 自定义多行输入框。

属性说明

confirm-type 有效值

Web 态说明：Web 态下，受设备系统或输入法控制，confirm-type 值无法修改键盘右下角按钮文字。

示例

在开发者工具中打开

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

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

Page({
    bindInput(e) {
        console.log('input - e:', e);
    }
});

代码示例 2： 自动聚焦

<view class="wrap">
    <view class="card-area"">
        <view class="top-description border-bottom">
            <view>自动聚焦</view>
            <view>auto-focus</view>
        </view>
        <textarea
            style="height: 1.12rem"
            maxlength="-1"
            disabled="{{false}}"
            auto-focus="{{true}}"
            placeholder="超过输入高度，会出现滚动条"
            confirm-hold="false"
            placeholder-class="plh"
            cursor="-1"
            confirm-type="换行"
            fixed="{{false}}"
            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" />
    </view>
</view>

Page({
    data: {
        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 组件上开发遮罩层。