微信小程序 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 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
vue 注册组件的使用详解
May 05 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
关于Js中new操作符的作用详解
Feb 21 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商品对比功能代码分享
2015/09/24 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
js控制input框只读实现示例
2014/01/20 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python变量类型知识点总结
2019/02/18 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python与C/C++的相互调用案例
2021/03/04 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
营业员演讲稿
2013/12/30 职场文书
银行服务感言
2014/03/01 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
员工开除通知书
2015/04/25 职场文书
开学典礼致辞
2015/07/29 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL