E企盈营销工具技术服务商 热线:4006-838-530

微信小程序开发之textarea坑

E企盈直播平台营销卖货系统

相信如果在开发小程序中使用过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希望对各位有点用~~~~

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序开发之textarea坑
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏