支付宝小程序表单组件 输入框·Textarea
多行输入框,可输入多行内容。
说明:
- 无法通过 textarea 获取键盘高度;
- iOS 系统支付宝客户端版本 10.1.80 及以上不支持 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 的样式。 | 1.6.0 |
placeholder-class | String | - | 指定 placeholder 的样式类。 | 1.6.0 |
disabled | Boolean | false | 是否禁用。 | - |
maxlength | Number | 140 | 最大长度,当设置为 -1 时不限制最大长度。 | - |
focus | Boolean | false | 获取焦点。 | - |
auto-height | Boolean | false | 是否自动增高。 | - |
show-count | Boolean | true | 是否渲染字数统计功能(是否删除默认计数器/是否显示字数统计)。 | 1.8.0 |
controlled | Boolean | false | 是否为受控组件。为 true 时,value 内容会完全受 setData 控制。 | 1.8.0 |
onInput | EventHandle | - | 键盘输入时触发,event.detail = {value: value} 。 |
- |
onFocus | EventHandle | - | 输入框聚焦时触发 event.detail = {value: value} 。 |
- |
onBlur | EventHandle | - | 输入框失去焦点时触发,event.detail = {value: value} 。 |
- |
onConfirm | EventHandle | - | 点击完成时触发,event.detail = {value: value} 。 |
- |