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