微信小程序 textarea 组件详解及简单实例
更新时间：2017年01月10日 15:08:48 投稿：lqh
这篇文章主要介绍了微信小程序 textarea 组件详解及简单实例的相关资料,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
微信小程序textarea
相关文章：
多行输入框。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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-->
<view class="section">
<textarea bindblur="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="{{focus}}" />
<view class="btn-area">
<button bindtap="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 组件
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了本地搭建微信小程序服务器的实现方法的相关资料,希望通过本文能帮助到大家，让大家轻松的搭建自己的微信小程序的服务器，需要的朋友可以参考下2017-10-10
这篇文章主要为大家介绍了JavaScript中单例模式的应用场景案例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了微信小程序 用户数据解密详细介绍的相关资料,需要的朋友可以参考下2017-01-01
WindiCSS实现加载windi.config.ts配置文件详解
这篇文章主要为大家介绍了WindiCSS实现加载windi.config.ts配置文件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了微信小程序 页面之间传参实例详解的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了微信小程序模块化详细介绍的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要为大家介绍了异步观察目标元素方式完成分页加载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了微前端框架qiankun的源码剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了微信小程序 定位到当前城市实现实例代码的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了微信小程序 条件渲染详解的相关资料,需要的朋友可以参考下2016-10-10
最新评论