微信小程序 textarea 组件详解及简单实例


Posted in Javascript onJanuary 10, 2017

微信小程序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 自动聚焦,拉起键盘。页面中只能有一个  或 设置 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.30textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误tip: 请勿在 scroll-view 中使用 textarea 组件

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
Javascript 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 #Javascript
微信小程序 label 组件详解及简单实例
Jan 10 #Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
You might like
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
php实现快速排序法函数代码
2012/08/27 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
ext实现完整的登录代码
2008/08/08 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python fileinput模块使用实例
2015/06/03 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python匿名函数及应用示例
2019/04/09 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
django的ORM操作 增加和查询
2019/07/26 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
《海伦?凯勒》教学反思
2014/04/17 职场文书
元旦晚会开场白
2015/05/29 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书