Textarea
多行输入框。
属性
支持通用属性
| 属性名 | 类型 | 默认值 | 说明 | 平台支持 |
|---|---|---|---|---|
| value | String | 输入框的内容 | all | |
| placeholder | String | 输入框为空时占位符 | all | |
| placeholder-style | String | 指定 placeholder 的样式 | all | |
| placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类 | all |
| disabled | Boolean | false | 是否禁用 | u?,w,a |
| maxlength | Number | 140 | 最大输入长度,设置为 -1 的时候不限制最大长度 | u?,w,a |
| focus | Boolean | false | 获取焦点 | u?,w,a |
| auto-height | Boolean | false | 是否自动增高,设置auto-height时,style.height不生效 | u?,w,a |
事件
支持通用事件
| 事件名 | 说明 | 平台支持 |
|---|---|---|
| oninput | 键盘输入事件,event.detail={value:value} | all |
| onfocus | 获取焦点事件:event.detail={value:value} | all |
| onblur | 失去焦点事件:event.detail={value:value} | all |
| onconfirm | 点击键盘完成事件:event.detail={value:value} | all |
示例
<!--textarea.nml-->
<view class="section">
<textarea onblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view class="section">
<textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;" />
</view>
<view class="section">
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
<textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="" />
<view class="btn-area">
<button onclick="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>
<view class="section">
<form onsubmit="bindFormSubmit">
<textarea placeholder="form 中的 textarea" name="textarea"/>
<button form-type="submit"> 提交 </button>
</form>
</view>
//textarea.js
Page({
data: {
height: 20,
focus: false
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
},
bindFormSubmit: function(e) {
console.log(e.detail.value.textarea)
}
})