textarea
基础库 1.0.0 开始支持本组件。
多行文本输入框。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| value | String | -- | 否 | 输入框的内容 | 1.0.0 |
| placeholder | String | -- | 否 | 输入框为空时占位符 | 1.0.0 |
| placeholder-style | String | -- | 否 | 指定 placeholder 的样式 | 1.0.0 |
| disabled | Boolean | false | 否 | 是否禁用 | 1.0.0 |
| maxlength | Number | 140 | 否 | 最大输入长度，设置为 -1 的时候不限制最大长度 | 1.0.0 |
| focus | Boolean | false | 否 | 是否获得焦点 | 1.0.0 |
| auto-height | Boolean | false | 否 | 是否自动增高，设置 auto-height 时，设置 height 样式不生效 | 1.0.0 |
| fixed | Boolean | false | 否 | 是否固定位置，如果设置了 css 样式position:fixed，需要将改属性设置为 true | 1.0.0 |
| cursor-spacing | Number | 0 | 否 | 指定软键盘弹出时，与光标的距离是多少，单位是 px | 1.0.0 |
| cursor | Number | -1 | 否 | 指定 focus 时的光标位置 | 1.0.0 |
| selection-start | Number | -1 | 否 | 指定 focus 时选中片段的起始位置 | 1.0.0 |
| selection-end | Number | -1 | 否 | 指定 focus 时选中片段的结束位置 | 1.0.0 |
| bindinput | EventHandler | -- | 否 | 键盘输入时触发，e.detail={value, cursor} | 1.0.0 |
| bindfocus | EventHandler | -- | 否 | 输入框聚焦时触发，event.detail={value,height}，height 是软键盘的高度 | 1.0.0 |
| bindblur | EventHandler | -- | 否 | 输入框失去焦点时触发，event.detail={value} | 1.0.0 |
| bindconfirm | EventHandler | -- | 否 | 用户点击键盘的完成按钮时触发，event.detail={value} | 1.0.0 |
代码示例
<textarea
bindfocus="onTextFocus"
bindblur="onTextBlur"
bindinput="onTextInput"
bindconfirm="onTextConfirm"
placeholder="请输入"
/>
<text>用户输入：{{value}}</text>Page({
data: {
value: "",
},
onTextFocus: function (e) {
console.log(e);
},
onTextBlur: function (e) {
console.log(e);
},
onTextInput: function (e) {
this.setData({
value: e.detail.value,
});
},
onTextConfirm: function (e) {
tt.showToast({ title: "confirm" });
},
});Bug & Tip
- Tip：请勿在
<scroll-view>、<swiper>、<picker-view>中使用<textarea>组件。 - Tip：css 动画对
<textarea>组件无效。 - Tip：如果样式上设置为
fixed元素，请在组件上添加fixed属性。 - Tip：
<textarea>的blur事件会晚于页面上的tap事件，如果需要在<button>的点击事件获取<textarea>，可以使用<form>的bindsubmit。 - Bug：当在
<textarea>外面包裹一个元素且设置有背景值颜色时，在 Android 手机上背景颜色是不能在<textarea>上生效的。此处可以通过直接在<textarea>上设置与包裹元素相同的背景颜色解决。
点击纠错
评价此篇文档