2022表单组件_小程序表单多行输入框表格详解

所属分类：php教程

浏览：220次- 评论： 0次- 更新时间：2022-10-08

描述：更多教程资料进入php教程获得。多行输入框。属性名类型默认值说明 value String 输入框的内容 placeholder ...

更多教程资料进入php教程获得。多行输入框。

属性名	类型	默认值	说明
value	String		输入框的内容
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	textarea-placeholder	指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
auto-focus	Boolean	false	自动聚焦，拉起键盘。
focus	Boolean	false	获取焦点
auto-height	Boolean	false	是否自动增高，设置auto-height时，style.height不生效
fixed	Boolean	false	如果 textarea 是在一个`position:fixed`的区域，需要显示指定属性 fixed 为 true
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
bindfocus	EventHandle		输入框聚焦时触发，event.detail = {value: value}
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
bindlinechange	EventHandle		输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	EventHandle		当键盘输入时，触发 input 事件，event.detail = {value: value}，bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirm	EventHandle		点击完成时，触发 confirm 事件，event.detail = {value: value}

示例代码：



  </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><view class="section">  <form bindsubmit="bindFormSubmit">    <textarea placeholder="form 中的 textarea" name="textarea"/>    <button form-type="submit"> 提交 </button>  </form></view></pre>登录后复制</code><code style="position:relative;"><pre class="brush:js;toolbar:false;">//textarea.js
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },  bindFormSubmit: function(e) {    console.log(e.detail.value.textarea)  }
})</pre>登录后复制</code><p>Bug & Tip</p><ol class=" list-paddingleft-2"><li><p><code>bug</code>: 微信版本<code>6.3.30</code>，<code>textarea</code>在列表渲染时，新增加的<code>textarea</code>在自动聚焦时的位置计算错误。</p></li><li><p><code> tip</code>:<code>textarea</code> 的<code>blur</code>事件会晚于页面上的<code>tap</code>事件，如果需要在<code>button</code>的点击事件获取<code>textarea</code>，可以使用<code>form</code>的<code>bindsubmit</code>。</p></li><li><p><code>tip</code>: 不建议在多行文本上对用户的输入进行修改，所以<code>textarea</code>的<code>bindinput</code>处理函数并不会将返回值反映到<code>textarea</code>上。</p></li><li><p><code>tip</code>:<code>textarea</code>组件是由客户端创建的原生组件，它的层级是最高的。</p></li><li><p><code>tip</code>: 请勿在<code>scroll-view</code>中使用<code>textarea</code>组件。</p></li><li><p><code>tip</code>:<code>css</code>动画对<code>textarea</code>组件无效。</p></li></ol><p>相关文章：</p><p>微信<a href="https://www.zzsucai.com/search-0-482-1.html" class="keylink" target="_blank">小程序</a>组件form表单解读和分析介绍</p><p>微信小程序之表单组件分享一</p><p>相关视频：</p><p>微信小程序开发文档<p>以上就是表单组件_小程序表单多行输入框表格详解的详细内容，更多请关注zzsucai.com其它相关文章！</p></span><p align="center"><img src="https://img.zzsucai.com/202210/08/phpgzh.png" style='width:100%;' /></p><div class="keyword"><i class="fa fa-tags"></i>  标签：
      <a class="tag" href="https://www.zzsucai.com/tag/8569.html" title="小程序表单," target="_blank">小程序表单,</a></div></div><div class="google-ad"><a href="/vip.html" target="_blank" title="VIP会员"><img src="https://img.zzsucai.com/202007/09/200709103447367.jpg"></a></div><div class="project-content"><div class="thumbile"><a class="nbtn nbtn-sc" id="favoriteBtn" onclick="favorite('15192')"><i class="fa fa-heart-o"></i> 收藏</a></div><div class="intsCon">      积分说明：注册即送10金币，每日签到可获得更多金币，成为VIP会员可免金币下载！ 
      <a href="https://www.zzsucai.com/member/index/recharge_index.html" target="_blank">充值积分</a><a href="https://www.zzsucai.com/vip.html" target="_blank">充值会员</a><a href="https://www.zzsucai.com/help/jifen.html" target="_blank">更多说明»</a></div></div><div class="project-content project-top-border"><link rel="stylesheet" type="text/css" href="https://www.zzsucai.com/static/js/share/share.min.css"><script src="https://www.zzsucai.com/static/js/share/jquery.share.min.js"></script><div id="share-1" data-weibo-title="2022表单组件_小程序表单多行输入框表格详解" data-qq-title="2022表单组件_小程序表单多行输入框表格详解"></div><script>    $('#share-1').share({sites: ['weibo','qq','qzone','wechat','douban']});
    </script></div><div class="project-content project-top-border"><div class="social"><div class="social-inner"><a class="social-left" href="https://www.zzsucai.com/biancheng/15191.html"><i class="fa fa-chevron-left" aria-hidden="true"></i><span>2022android微信登陆、分享做了一段时间了发现的一些坑<span></span></span></a><div class="social-round"><div class="social-round-border"><span></span></div><i onclick="Backtop();" class="social-round-inner fa fa-arrow-up" aria-hidden="true"></i></div><a class="social-right" href="https://www.zzsucai.com/biancheng/15193.html"><span>2022最新整理出的微信分享后端接口实现的大致流程</span><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div></div></div><div class="in2-tit"><h4><i class="fa fa-comments-o" aria-hidden="true"></i> 讨论这个素材（0）<span class="z14">回答他人问题或分享使用心得奖励金币</span></h4></div><div class="in2" id="meglist"><a name="anchor"></a><p id="no-m-data">〒_〒 居然一个评论都没有……</p></div><div class="message in2"><div class="alert-success" id="err"></div><textarea id="body" class="textarea" style="height:120px; width:100%;" placeholder="您有什么想法要说的吗？帮助他人、分享技术会获得积分奖励！">表情  文明上网，理性发言！

2022表单组件_小程序表单多行输入框表格详解

`热门推荐 / HOT`

`最新发布 / NEW`

`点击排行 / RANK`

`标签推荐 / TAG更多`

技术交流QQ群