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

发布时间：2020-12-14 20:22:29 所属栏目：资源来源：网络整理

导读：微信小程序textarea 相关文章：多行输入框。属性名类型默认值说明或设置 auto-focus 属性示例代码： Bug & Tip bug : 微信版本 6.3.30 ， textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误 tip : 请勿在 scroll-view 中使用 te

</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;">

<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>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/231436.html" target="_blank">html – 使用Alpha通道点击div</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/254051.html" target="_blank">微信小程序开发基本知识总结</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/237761.html" target="_blank">微信公众号OAuth2.0网页授权问题浅析</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/245156.html" target="_blank">html – 如何设置引导容器的最小高度</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/245168.html" target="_blank">html – 动态表单标签宽度的CSS</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/266014.html" target="_blank">HTML框架结构标签（frameset）</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/277334.html" target="_blank">sublime下安装jshint插件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/269805.html" target="_blank">windows下nginx的安装使用及解决80端口被占用nginx不能启动</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/244451.html" target="_blank">将HTML转换为Java中的纯文本</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/244742.html" target="_blank">html – overflow：使用表时隐藏不起作用</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/243373.html" target="_blank">如何在html文件中添加图像？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/267282.html" target="_blank">IFrame导致javascript代码无法执行</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/253941.html" target="_blank">梦幻式下拉菜单</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/266819.html" target="_blank">jQuery实现类似滑动门切换效果的层切换</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/261224.html" target="_blank">html – 使用fieldset标签有什么好处？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/263831.html" target="_blank">html – 如何在输入中只占用占位符斜体</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/273996.html" target="_blank">Azure Web服务无法连接到数据库</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/253743.html" target="_blank">火狐手机测试</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/253301.html" target="_blank">小程序样式表不支持级联选择器</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/ziyuan/ziyuan/20201214/274887.html" target="_blank">domain-name-system – 当我模拟关闭的域控制器在</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>

微信小程序textarea 相关文章：多行输入框。属性名	类型	默认值	说明

微信小程序textarea

多行输入框。

属性名

类型

默认值

说明