微信小程序 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	自动聚焦，拉起键盘。页面中只能有一个 </code> 或<code><input/></code> 设置 auto-focus 属性</td> </tr> <tr> <td>focus</td> <td>Boolean</td> <td>false</td> <td>获取焦点（开发工具暂不支持）</td> </tr> <tr> <td>auto-height</td> <td>Boolean</td> <td>false</td> <td>是否自动增高，设置auto-height时，style.height不生效</td> </tr> <tr> <td>bindfocus</td> <td>EventHandle</td> <td> </td> <td>输入框聚焦时触发，event.detail = {value: value}</td> </tr> <tr> <td>bindblur</td> <td>EventHandle</td> <td> </td> <td>输入框失去焦点时触发，event.detail = {value: value}</td> </tr> <tr> <td>bindlinechange</td> <td>EventHandle</td> <td> </td> <td>输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}</td> </tr> </tbody> </table> <p>示例代码：</p> <div class="jb51code"> <pre class="brush:js;"> <!--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></pre> </div> <div class="jb51code"> <pre class="brush:js;"> //textarea.js Page({ data: { height: 20, focus: false }, bindButtonTap: function() { this.setData({ focus: true }) }, bindTextAreaBlur: function(e) { console.log(e.detail.value) } })</pre> </div> <p>Bug & Tip<code>bug</code>: 微信版本 <code>6.3.30</code>，<code>textarea</code> 在列表渲染时，新增加的 <code>textarea</code> 在自动聚焦时的位置计算错误<code>tip</code>: 请勿在 <code>scroll-view</code> 中使用 <code>textarea</code> 组件</p> <div>感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！</div> </div> <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;"> </div> <div class="article_recommend"> <div class="list_top">推荐阅读</div> <div class="ListItems"> <ul class="NewsList"> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/CongBianLiangFen_491c0532.html" target="_blank" title="从变量分配时,分配的css类不起作用">从变量分配时,分配的css类不起作用</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《从变量分配时,分配的css类不起作用》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/CongBianLiangFen_491c0532.html" target="_blank" title="从变量分配时,分配的css类不起作用">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeWeiDuoGe_-10_634ffb3b.html" target="_blank" title="如何为多个(10k - 100k)请求正确调用Akka HTTP客户端？">如何为多个(10k - 100k)请求正确调用Akka HTTP客户端？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何为多个(10k-100k)请求正确调用AkkaHTTP客户端？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeWeiDuoGe_-10_634ffb3b.html" target="_blank" title="如何为多个(10k - 100k)请求正确调用Akka HTTP客户端？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/-NET_FuWuQiRuHeJ_38a91a48.html" target="_blank" title=".NET服务器如何将文件处理结果推送到客户端jQuery？">.NET服务器如何将文件处理结果推送到客户端jQuery？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《.NET服务器如何将文件处理结果推送到客户端jQuery？》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/-NET_FuWuQiRuHeJ_38a91a48.html" target="_blank" title=".NET服务器如何将文件处理结果推送到客户端jQuery？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeZai_python_K_d545ca56.html" target="_blank" title="如何在python控制台中运行Odoo ORM方法？">如何在python控制台中运行Odoo ORM方法？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何在python控制台中运行OdooORM方法？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZai_python_K_d545ca56.html" target="_blank" title="如何在python控制台中运行Odoo ORM方法？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/MingLingXing_C_C_84a8c626.html" target="_blank" title="命令行C程序到Swift">命令行C程序到Swift</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《命令行C程序到Swift》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/MingLingXing_C_C_84a8c626.html" target="_blank" title="命令行C程序到Swift">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/ShiFouKeYiZai_Vi_9e000322.html" target="_blank" title="是否可以在Visual Studio Online中生成图形以显示编码器的贡献？">是否可以在Visual Studio Online中生成图形以显示编码器的贡献？</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/ShiFouKeYiZai_Vi_9e000322.html" target="_blank" title="是否可以在Visual Studio Online中生成图形以显示编码器的贡献？"><img src="https://img.devbox.cn/3cccf/16086/243/c1c0b4e02fdd405a.png" width="120" height="70" alt="是否可以在Visual Studio Online中生成图形以显示编码器的贡献？"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《是否可以在VisualStudioOnline中生成图形以显示编码器的贡献？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ShiFouKeYiZai_Vi_9e000322.html" target="_blank" title="是否可以在Visual Studio Online中生成图形以显示编码器的贡献？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Cong_XML_ShengMi_eb84eb73.html" target="_blank" title="从XML声明片段中获取XML编码：部分内容解析不支持XmlDeclaration">从XML声明片段中获取XML编码：部分内容解析不支持XmlDeclaration</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/Cong_XML_ShengMi_eb84eb73.html" target="_blank" title="从XML声明片段中获取XML编码：部分内容解析不支持XmlDeclaration"><img src="https://img.devbox.cn/3cccf/16086/243/d7c059f5a3503b7b.png" width="120" height="70" alt="从XML声明片段中获取XML编码：部分内容解析不支持XmlDeclaration"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《从XML声明片段中获取XML编码：部分内容解析不支持XmlDeclaration》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Cong_XML_ShengMi_eb84eb73.html" target="_blank" title="从XML声明片段中获取XML编码：部分内容解析不支持XmlDeclaration">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/WeiShiMeMeiYouSh_01efa737.html" target="_blank" title="为什么没有设置宽度，边框样式仍显示边框？">为什么没有设置宽度，边框样式仍显示边框？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《为什么没有设置宽度，边框样式仍显示边框？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WeiShiMeMeiYouSh_01efa737.html" target="_blank" title="为什么没有设置宽度，边框样式仍显示边框？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Zai_Windows_Shan_2998bc62.html" target="_blank" title="在Windows上使用pthreads 3.1.5的PHP 7.0.0无法启动">在Windows上使用pthreads 3.1.5的PHP 7.0.0无法启动</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在Windows上使用pthreads3.1.5的PHP7.0.0无法启动》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_Windows_Shan_2998bc62.html" target="_blank" title="在Windows上使用pthreads 3.1.5的PHP 7.0.0无法启动">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/PostgreSQL-_SuoY_a0d79c37.html" target="_blank" title="PostgreSQL:索引时间戳的日期部分">PostgreSQL:索引时间戳的日期部分</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《PostgreSQL:索引时间戳的日期部分》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/PostgreSQL-_SuoY_a0d79c37.html" target="_blank" title="PostgreSQL:索引时间戳的日期部分">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Python_ZhongShiY_b65f45d9.html" target="_blank" title="Python中使用Tesseract OCR的UnicodeDecodeError">Python中使用Tesseract OCR的UnicodeDecodeError</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Python中使用TesseractOCR的UnicodeDecodeError》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Python_ZhongShiY_b65f45d9.html" target="_blank" title="Python中使用Tesseract OCR的UnicodeDecodeError">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/TextViewonclick__5d844ca3.html" target="_blank" title="TextView onclick方法崩溃了应用程序">TextView onclick方法崩溃了应用程序</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《TextViewonclick方法崩溃了应用程序》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/TextViewonclick__5d844ca3.html" target="_blank" title="TextView onclick方法崩溃了应用程序">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Ecto-_RuHeCongWa_03ebfa30.html" target="_blank" title="Ecto:如何从外键中的某个字段订购结果">Ecto:如何从外键中的某个字段订购结果</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Ecto:如何从外键中的某个字段订购结果》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Ecto-_RuHeCongWa_03ebfa30.html" target="_blank" title="Ecto:如何从外键中的某个字段订购结果">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/JiChu_6_HeXin_js_4d1774f9.html" target="_blank" title="基础6核心js错误">基础6核心js错误</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《基础6核心js错误》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/JiChu_6_HeXin_js_4d1774f9.html" target="_blank" title="基础6核心js错误">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Flux_ShiShiFenXi_e89612f2.html" target="_blank" title="Flux实施分析">Flux实施分析</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《Flux实施分析》经验，为你挑选了0个好方法。 ... <a href="https://devbox.cn/p/Flux_ShiShiFenXi_e89612f2.html" target="_blank" title="Flux实施分析">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/ZaiShiYong_MSVC2_ade06b00.html" target="_blank" title="在使用MSVC 2015构建boost 1.55时指定工具集版本">在使用MSVC 2015构建boost 1.55时指定工具集版本</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在使用MSVC2015构建boost1.55时指定工具集版本》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ZaiShiYong_MSVC2_ade06b00.html" target="_blank" title="在使用MSVC 2015构建boost 1.55时指定工具集版本">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/JBoss-_RuHeZai_j_fceda5d3.html" target="_blank" title="JBoss-如何在jboss-deployment-structure中排除javax.validation？">JBoss-如何在jboss-deployment-structure中排除javax.validation？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《JBoss-如何在jboss-deployment-structure中排除javax.validation？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/JBoss-_RuHeZai_j_fceda5d3.html" target="_blank" title="JBoss-如何在jboss-deployment-structure中排除javax.validation？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/YiZhongFangFaDia_1a0b502e.html" target="_blank" title="一种方法调用,多种可能的错误条件 - 如何在面向对象编程中进行管理？">一种方法调用,多种可能的错误条件 - 如何在面向对象编程中进行管理？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《一种方法调用,多种可能的错误条件-如何在面向对象编程中进行管理？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/YiZhongFangFaDia_1a0b502e.html" target="_blank" title="一种方法调用,多种可能的错误条件 - 如何在面向对象编程中进行管理？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/TianJiaShiLiangZ_51310a1b.html" target="_blank" title="添加矢量中相同的值">添加矢量中相同的值</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《添加矢量中相同的值》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/TianJiaShiLiangZ_51310a1b.html" target="_blank" title="添加矢量中相同的值">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeZai_Xcode_Zh_47449303.html" target="_blank" title="如何在Xcode中的UITests之间保持应用程序打开">如何在Xcode中的UITests之间保持应用程序打开</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何在Xcode中的UITests之间保持应用程序打开》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/RuHeZai_Xcode_Zh_47449303.html" target="_blank" title="如何在Xcode中的UITests之间保持应用程序打开">[详细]</a> </div> <div style="clear:both"></div> </li> </ul> </div> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">吐了个 "CAO" !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了 会员登录 | 用户注册 小色米虫_524 这个屌丝很懒，什么也没留下！ 关注作者 Tags | 热门标签 mpvue mpx taro uni-app wepy 头条小程序 小程序 小程序云开发 微信小程序 微信开发者工具 支付宝小程序 百度智能小程序 RankList | 热门文章 1Gradle exec任务返回非零退出值并使构建失败但我想不会失败而是执行另一个任务 2使用Swift 2编程从持久ID中查找歌曲 3(Swift)滚动时NSTimer停止 4Symfony 3.0和HWIOAuthBundle不能一起工作？ 5Flask和SQLalchemy NoForeignKeysError:无法确定关系User.posts上的父/子表之间的连接条件 6Android RecyclerView Checkbox随机检查 7自定义标签指示器(箭头向下像指示器) 8从浏览器捕获系统声音 9Gradle发布到Artifactory的特定回购 10Xamarin Forms，如何将输入的日期从日期选择器中转换为您选择的格式？ 11是否可以修改现有的TensorFlow计算图？ 12Javascript数组？ 13创建没有eval/parse的函数列表 14es6中Map和WeakMap集合上的垃圾收集 15使用.m3u8解密和组合.ts音频文件 16向Sentry发送Django-RQ异常 17Django:.is_superuser字段不起作用 18使用http.createServer的Node.js回调类型错误 19ekequent模型中id周围的引号在生产站点上是必需的,但不适用于localhost 20使用OpenCV将图像变形为另一图像的四边形区域 DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有