pp电子

登录
免费开通

微信小程序表单组件多行输入框textarea,textarea多行输入框

textarea


多行输入框。。。。。

 

属性名 类型 默认值 说明
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}

 

示例代码:

<!--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><view class="section">
  <form bindsubmit="bindFormSubmit">    <textarea placeholder="form 中的 textarea" name="textarea"/>    <button form-type="submit"> 提交 </button>  </form></view>
//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)  }
})

 

Bug & Tip

  1. bug: 微信版本6.3.30,,,,textarea在列表渲染时,,,,新增添的textarea在自动聚焦时的位置盘算过失。。。。。
  2. tip:textareablur事务会晚于页面上的tap事务,,,,若是需要在button的点击事务获取textarea,,,,可以使用formbindsubmit。。。。。
  3. tip: 不建议在多行文本上对用户的输入举行修改,,,,以是textareabindinput处理函数并不会将返回值反映到textarea上。。。。。
  4. tip:textarea组件是由客户端建设的原生组件,,,,它的层级是最高的。。。。。
  5. tip: 请勿在scroll-view中使用textarea组件。。。。。
  6. tip:css动画对textarea组件无效。。。。。

更多微信小程序开发教程,,,,可以关注。。。。。
【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,若有知识产权人并不肯意我们使用,,,,若是有侵权请连忙联系。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,仅系客观性形貌,,,,如您需要相识该类商品/服务详细的资讯,,,,请您直接与该类商品/服务的提供者联系。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异,,,,提供产品和服务,,,,助力企业向数字化转型,,,,通过科技驱动商业刷新,,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



上/下篇
  • 微信小程序表单组件开关switch,switch开关选择器

  • 微信小程序导航navigator,navigator页面链接

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序表单组件多行输入框textarea,textare