鱼C论坛

 找回密码
 立即注册
查看: 1242|回复: 0

[庖丁解牛] 052 ∞ 表单组件:textarea

[复制链接]
发表于 2018-6-30 09:56:21 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-6-30 09:56 编辑


                               
登录/注册后可看大图


上一讲我们搞定了switch,本次来学习textarea

textarea,多行输入框,属性:
属性名        类型        默认值        说明
value        String                输入框的内容
placeholder        String                输入框为空时占位符
placeholder-style        String                指定 placeholder 的样式
placeholder-class        String        extarea-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 指定的距离的最小值作为光标与键盘的距离
cursor        Number                指定focus时的光标位置
show-confirm-bar        Boolean        true        是否显示键盘上方带有”完成“按钮那一栏
selection-start        Number-1        光标起始位置,自动聚集时有效,需与selection-end搭配使用
selection-end        Number        -1        光标结束位置,自动聚集时有效,需与selection-start搭配使用
bindfocus        EventHandle                输入框聚焦时触发,event.detail = {value: value}
bindblur        EventHandle                输入框失去焦点时触发,event.detail = {value, cursor}
bindlinechange        EventHandle                输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput        EventHandle                当键盘输入时,触发 input 事件,event.detail = {value, cursor}, bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirm        EventHandle                点击完成时, 触发 confirm 事件,event.detail = {value: value}


index.wxml:
  1. <!--textarea.wxml-->
  2. <view class="section">
  3.   <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
  4. </view>
  5. <view class="section">
  6.   <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
  7. </view>
  8. <view class="section">
  9.   <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
  10. </view>
  11. <view class="section">
  12.   <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  13.   <view class="btn-area">
  14.     <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  15.   </view>
  16. </view>
  17. <view class="section">
  18.   <form bindsubmit="bindFormSubmit">
  19.     <textarea placeholder="form 中的 textarea" name="textarea"/>
  20.     <button form-type="submit"> 提交 </button>
  21.   </form>
  22. </view>   
复制代码


index.js:
  1. Page({
  2.   data: {
  3.     height: 20,
  4.     focus: false
  5.   },
  6.   bindButtonTap: function () {
  7.     this.setData({
  8.       focus: true
  9.     })
  10.   },
  11.   bindTextAreaBlur: function (e) {
  12.     console.log(e.detail.value)
  13.   },
  14.   bindFormSubmit: function (e) {
  15.     console.log(e.detail.value.textarea)
  16.   }
  17. })
复制代码


微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。

textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit。

不建议在多行文本上对用户的输入进行修改,所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea上。

textarea 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。

请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。

css 动画对 textarea 组件无效。




课后作业


1、css 动画对 textarea 组件无效?(T/F)



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢小程序,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 20:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表