相信如果在开发小程序中使用过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 }) }})













