微信小程序 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 相关文章推荐
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
javascript检测两个数组是否相似
May 19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
js实现轮播图特效
May 28 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
德生PL330测评
2021/03/02 无线电
adodb与adodb_lite之比较
2006/12/31 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
好人好事事迹材料
2014/02/12 职场文书
公司营业员的自我评价
2014/03/04 职场文书
购房协议书范本
2014/04/11 职场文书
学生安全承诺书
2014/05/22 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
2014年基建工作总结
2014/12/12 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书