多行输入框,可输入多行内容。
注意:
无法通过 textarea 获取键盘高度。
iOS 系统阿里云客户端不支持 focus=true 自动唤起。
可以使用 my.hideKeyboard 隐藏键盘。
添加属性 controlled="{{true}}" 表示 value 内容会完全受 setData 控制
可以在 input 组件中加上 enableNative="{{false}}",避免 textarea 弹出键盘后内容被顶起。
加上 enableNative="{{false}}" 解决安卓系统下 textarea 获取焦点的时候文字消失问题。
扫码体验
示例代码
<!-- API-DEMO page/component/textarea/textarea.axml -->
<view class="page">
<view class="page-description">文本框</view>
<view class="page-section">
<view class="page-section-title">受控聚焦</view>
<view class="page-section-demo">
<textarea focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="Please input something" />
</view>
<view class="page-section-btns">
<button type="default" size="mini" onTap="bindButtonTap">聚焦</button>
</view>
</view>
<view class="page-section">
<view class="page-section-title">自适应高度</view>
<view class="page-section-demo">
<textarea onBlur="bindTextAreaBlur" auto-height placeholder="Please input something" />
</view>
</view>
<view class="page-section">
<view class="page-section-title">结合表单</view>
<form onSubmit="bindFormSubmit">
<view class="page-section-demo">
<textarea name="textarea" placeholder="Please input something" />
</view>
<view class="page-section-btns">
<button form-type="submit" size="mini" type="primary">提交</button>
</view>
</form>
</view>
</view>
// API-DEMO page/component/textarea/textarea.js
Page({
data: {
height: 20,
focus: false,
},
bindButtonTap() {
this.onFocus();
},
onFocus() {
this.setData({
focus: true,
});
},
onBlur() {
this.setData({
focus: false,
});
},
bindTextAreaBlur(e) {
console.log(e.detail.value);
},
bindFormSubmit(e) {
my.alert({
content: e.detail.value.textarea,
});
},
});
属性
属性 | 类型 | 默认值 | 描述 |
name | String | - | 组件名字,用于表单提交获取数据 |
value | String | - | 初始内容 |
placeholder | String | - | 占位符 |
placeholder-style | String | - | 指定 placeholder 的样式 |
placeholder-class | String | - | 指定 placeholder 的样式类 |
disabled | Boolean | false | 是否禁用 |
maxlength | Number | 140 | 最大长度,当设置为-1时不限制最大长度 |
focus | Boolean | false | 获取焦点(iOS无效) |
auto-height | Boolean | false | 是否自动增高 |
show-count | Boolean | true | 是否渲染字数统计功能( 是否删除默认计数器/是否显示字数统计 ) |
controlled | Boolean | false | 是否为受控组件。为 true 时,value 内容会完全受 setData 控制 |
onInput | EventHandle | - | 键盘输入时触发,
,可以直接 return 一个字符串以替换输入框的内容 |
onFocus | EventHandle | - | 输入框聚焦时触发
|
onBlur | EventHandle | - | 输入框失去焦点时触发,
|
onConfirm | EventHandle | - | 点击完成时触发,
|
在文档使用中是否遇到以下问题
更多建议
匿名提交