微信小程序 textarea 组件详解及简单实例
微信小程序textarea
相关文章：
微信小程序Button
微信小程序radio
微信小程序slider
微信小程序switch
微信小程序textarea
微信小程序picker-view
微信小程序picker
微信小程序label
微信小程序input
微信小程序form
微信小程序checkbox
多行输入框。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | 输入框的内容 | |
| placeholder | String | 输入框为空时占位符 | |
| placeholder-style | String | 指定placeholder的样式 | |
| placeholder-class | String | textarea-placeholder | 指定placeholder的样式类 |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大输入长度，设置为0的时候不限制最大长度 |
| auto-focus | Boolean | false | 自动聚焦，拉起键盘。页面中只能有一个 <textarea/> 或<input/> 设置auto-focus属性 |
| focus | Boolean | false | 获取焦点（开发工具暂不支持） |
| auto-height | Boolean | false | 是否自动增高，设置auto-height时，style.height不生效 |
| bindfocus | EventHandle | 输入框聚焦时触发，event.detail={value:value} | |
| bindblur | EventHandle | 输入框失去焦点时触发，event.detail={value:value} | |
| bindlinechange | EventHandle | 输入框行数变化时调用，event.detail={height:0,heightRpx:0,lineCount:0} |
示例代码：
<!--textarea.wxml-->
<viewclass="section">
<textareabindblur="bindTextAreaBlur"auto-heightplaceholder="自动变高"/>
</view>
<viewclass="section">
<textareaplaceholder="placeholder颜色是红色的"placeholder-style="color:red;"/>
</view>
<viewclass="section">
<textareaplaceholder="这是一个可以自动聚焦的textarea"auto-focus/>
</view>
<viewclass="section">
<textareaplaceholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"/>
<viewclass="btn-area">
<buttonbindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>
//textarea.js
Page({
data:{
height:20,
focus:false
},
bindButtonTap:function(){
this.setData({
focus:true
})
},
bindTextAreaBlur:function(e){
console.log(e.detail.value)
}
})
Bug&Tipbug:微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误tip:请勿在 scroll-view 中使用 textarea 组件
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！