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},可以直接 return 一个字符串以替换输入框的内容 | ||
onFocus | EventHandle | 输入框聚焦时触发 event.detail = {value: value} | ||
onBlur | EventHandle | 输入框失去焦点时触发,event.detail = {value: value} | ||
onConfirm | EventHandle | 点击完成时触发,event.detail = {value: value} |
Screenshot
示例代码
<view class="section">
<textarea onBlur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
<textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<view class="btn-area">
<button onTap="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>
<view class="section">
<form onSubmit="bindFormSubmit">
<textarea placeholder="form 中的 textarea" name="textarea"/>
<button form-type="submit"> 提交 </button>
</form>
</view>
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
},
bindFormSubmit: function(e) {
console.log(e.detail.value.textarea)
}
})