textarea 多行输入框

textarea 多行输入框

v3.140.1 起支持同层渲染。

解释：多行输入框。内部不支持嵌套其他组件。如需更多自定义样式，可使用 Smart UI 组件，详见 textarea 自定义多行输入框。

属性说明

属性名	类型	默认值	必填	说明	最低支持版本	Web 态说明
value	String		否	输入框的内容，若要动态设置输入框内容，需设置`value = “{= value =}”`（注：若要取键盘输入后的 value 请通过 bindinput 获取）	-	-
disabled	Boolean	false	否	是否禁用	-	-
maxlength	Number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度	-	-
placeholder	String		否	输入框为空时占位符。其样式暂时只支持设置 font-size、font-weight、color	-	-
placeholder-style	String		否	指定 placeholder 的样式	-	-
placeholder-class	String		否	指定 placeholder 的样式类	-	-
auto-height	Boolean	false	否	是否自动增高，设置 auto-height 时，style.height 不生效	-	-
cursor	Number	-1	否	指定 focus 时的光标位置，自动聚焦时才会生效	-	-
auto-focus	Boolean	false	否	自动聚焦，调起键盘	-	由于浏览器兼容性问题，部分浏览器中无效
confirm-type	String	default	否	设置键盘右下角按钮的文字	3.70.53 低版本请做兼容性处理	暂不支持
confirm-hold	Boolean	false	否	点击键盘右下角按钮时是否保持键盘不收起	3.130.1 低版本请做兼容性处理	-
focus	Boolean	false	否	获取焦点，调起键盘	-	-
fixed	Boolean	false	否	如果 textarea 是在一个`position: fixed`的区域，需要显示指定属性 fixed 为 true	-	-
cursor-spacing	Number	0	否	指定光标与键盘的距离（单位：px）。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	-	-
show-confirm-bar	Boolean	true	否	是否显示键盘上方带有“完成”按钮那一栏	-	暂不支持
selection-start	Number	-1	否	光标起始位置，自动聚焦时有效，需与 selection-end 搭配使用	-	-
selection-end	Number	-1	否	光标结束位置，自动聚焦时有效，需与 selection-start 搭配使用	-	-
adjust-position	Boolean	true	否	键盘弹起时，是否自动上推页面	-	受限于设备系统，暂不支持
bindfocus	EventHandle		否	输入框聚焦时触发，`event.detail = {value, height}`，height 为键盘高度	-	-
bindblur	EventHandle		否	输入框失去焦点时触发，`event.detail = {value, cursor}`	-	-
bindlinechange	EventHandle		否	输入框行数变化时调用，`event.detail = {height: 0, heightRpx: 0, lineCount: 0, lineHeight: 0}`	-	-
bindinput	EventHandle		否	当键盘输入时，触发 input 事件，`event.detail = {value, cursor}`，bindinput 处理函数的返回值并不会反映到 textarea 上	-	-
bindconfirm	EventHandle		否	点击完成时，触发 confirm 事件，`event.detail = {value: value}`	-	-

confirm-type 有效值

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

值	说明
default	原生键盘状态，输入状态下右下角按钮为“确认”，可将用户正在输入的文字填充至输入框，未输入状态下右下角按钮为“换行”，用户点击后可手动换行
done	右下角按钮为“完成”，点击会触发 bindconfirm 事件
send	右下角按钮为“发送”，点击会触发 bindconfirm 事件
search	右下角按钮为“搜索”，点击会触发 bindconfirm 事件
next	右下角按钮为“下一步”，点击会触发 bindconfirm 事件
go	右下角按钮为“前往”，点击会触发 bindconfirm 事件

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

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

SWAN
JS

<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>

代码示例 2：自动聚焦

SWAN
JS

<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>

Bug & Tip

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