微信小程序开发之textarea坑

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

})

注：这样做是有一个缺陷的，就是需要点击两次才能唤起软键盘，用户体验不是很好，如果在ｔｅｘｔａｒｅａ中加入ａｕｔｏ－ｆｏｕｃｅ时，在ｉｏｓ手机上会出现软键盘弹起两次的情况，用户体验也不太好。

方法二：使用弹出框输入　

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

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