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

textarea 多行輸入框

解釋：多行輸入框（v3.140.1 起支持 同層渲染 ），不支持嵌套在其它組件中使用。如需更多自定義樣式，可使用 Smart UI 組件，詳見 textarea 自定義多行輸入框。

屬性說明

confirm-type 有效值

Web 態(tài)說明：Web 態(tài)下，受設(shè)備系統(tǒng)或輸入法控制，confirm-type 值無法修改鍵盤右下角按鈕文字。

示例

在開發(fā)者工具中打開

代碼示例 1：輸入?yún)^(qū)高度自適應(yīng)

<view class="wrap">
   <view class="card-area">
        <view class="top-description border-bottom">
            <view>輸入?yún)^(qū)高度自適應(yīng)</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="超過輸入高度，會出現(xiàn)滾動條"
            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 處理函數(shù)并不會將返回值反映到 textarea 上。Tip：請使用 cover-view 組件在 textarea 組件上開發(fā)遮罩層。