亲宝软件园·资讯

展开

微信小程序输入多行文本

Arururururu 人气:12

引言

昨天把系分的项目又加了一点逻辑判断,比如已经下单的菜品不能减少,不能重复下单,应该先下单再支付等…

弄完购物车的逻辑之后,发现一直没有管备注那一块,于是输入了一下试试,结果发现不能换行…就非常丑陋

后来查阅相关资料发现,我用的wxml组件是input,只能单行输入,如果要支持多行输入,应该用textarea。

下面就来介绍一下textarea:

1、textarea的属性相关介绍

属性名类型默认值说明最低版本
valueString 输入框的内容 
placeholderString 输入框为空时占位符 
placeholder-styleString 指定 placeholder 的样式 
placeholder-classStringtextarea-placeholder指定 placeholder 的样式类 
disabledBooleanfalse是否禁用 
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度 
auto-focusBooleanfalse自动聚焦,拉起键盘。 
focusBooleanfalse获取焦点 
auto-heightBooleanfalse是否自动增高,设置auto-height时,style.height不生效 
fixedBooleanfalse如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true 
cursor-spacingNumber0指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 
cursorNumber 指定focus时的光标位置1.5.0
show-confirm-barBooleantrue是否显示键盘上方带有”完成“按钮那一栏1.6.0
selection-startNumber-1光标起始位置,自动聚集时有效,需与selection-end搭配使用1.9.0
selection-endNumber-1光标结束位置,自动聚集时有效,需与selection-start搭配使用1.9.0
adjust-positionBooleantrue键盘弹起时,是否自动上推页面1.9.90
bindfocusEventHandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 
bindblurEventHandle 输入框失去焦点时触发,event.detail = {value, cursor} 
bindlinechangeEventHandle 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} 
bindinputEventHandle 当键盘输入时,触发 input 事件,event.detail = {value, cursor}, bindinput 处理函数的返回值并不会反映到 textarea 上  
bindconfirmEventHandle 点击完成时, 触发 confirm 事件,event.detail = {value: value}

2、使用示例

下面给出我们的 的示例,备注输入框的值与details绑定,当失去焦点(默认为输入完成)时将textarea的输入框内的值赋值给details,而执行完某些业务(提交订单or支付订单)时设置details为空字符串。

//wxml
<textarea class="detailText" 
    placeholder="输入您的备注"
    bindblur="bindTextAreaBlur"
    value="{{details}}">
</textarea>


//js
bindTextAreaBlur: function(e) {
    console.log(e.detail.value);
    var that = this;
    that.setData({
      details: e.detail.value
    });
  },

...

//提交订单或支付订单时清空备注
var that = this;
that.setData({
              details: '',
            })

由于备注部分在页面上只占一部分位置,因此设置其css样式为固定高度,而不是设其属性auto-height。

3、效果

支持多行输入,超过给定高度出现滚动条

获取输入框内的文字

4、Bug & Tip bug:

  1. bug: 微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。
  2. tip: textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit。
  3. tip: 不建议在多行文本上对用户的输入进行修改,所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
  4. tip: textarea 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
  5. tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。
  6. tip: css 动画对 textarea 组件无效。

更多资料请查看官网文档

总结

加载全部内容

相关教程
猜你喜欢
用户评论