微信小程序> 微信小程序开发之textarea坑

微信小程序开发之textarea坑

浏览量:551 时间: 来源:阡路陌人
相信如果在开发小程序中使用过textarea的小伙伴们应该清楚这个连官网都还没有暂解之法,所以在平时的开发中是尽量避免使用这个坑,但如果真的非要使用,那咋办呢?故记下我的两个思路,如各位有更好的方法,还请赐教留言~

方法一:模拟textarea样式文本框,点击切换为textarea,失焦切换虚拟文本框

即wxml:

<textarea placeholder='请输入文本' bindblur='textarea' value='textareaVal'  hidden='{{isfouce}}'></textarea>
<view bindtap='isfouce' hidden='{{!isfouce}}'>{{textareaVal.length != 0?textareaVal:'请输入文本'}}</view>

js:

page({    data: {        isfouce: true      // 切换        textareaVal: ''    // textarea的输入值    },    /*    * 点击切换    **/    isfouce: function () {        this.setData({            isfouce: false        })    },    /*    * 失焦事件    **/    textarea: function (e) {        this.setData({            isfouce: true,            textareaVal: e.detaul.dataset.value        })    }})
注:这样做是有一个缺陷的,就是需要点击两次才能唤起软键盘,用户体验不是很好,如果在textarea中加入auto-fouce时,在ios手机上会出现软键盘弹起两次的情况,用户体验也不太好。

方法二:使用弹出框输入 

wxml:
<view bindtap='isfouce'><navigator>{{textareaVal.length != 0?textareaVal:'请输入文本'}}</navigator></view> // 弹窗 样式根据自己项目自定啦<view wx:if="{{!hiddenmodalput}}" title="" class='textareaModal'>    <view class='shadow' bindtap="cancel"></view>    <view>      <view>         <textarea placeholder='请输入文本' value='{{textareaVal}}' fixed='true' bindinput='textarea'></textarea>           <view class='modalBtn clearfix'>          <navigator class='fl' bindtap='cancel'>取消</navigator>          <navigator class='fr' bindtap="confirm">确定</navigator>        </view>      </view>    </view></view>
js:
page({    data: {        hiddenmodalput: true,   // 控制弹窗显示隐藏        textareaVal: '',        // textarea的文本值    },    isfouce: function () {        this.setData({            hiddenmodalput: false        })    },    textarea: function (e) {        this.setData({            textareaVal: e.detail.dataset.value        })    }})




有关textarea的相关属性见官网https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html?search-key=textarea






希望对各位有点用~~~~

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎