1. 程式人生 > >微信小程式開發之textarea坑

微信小程式開發之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 }) } })
注:這樣做是有一個缺陷的,就是需要點選兩次才能喚起軟鍵盤,使用者體驗不是很好,如果在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
        })
    }
})
希望對各位有點用~~~~