ios+Safari textarea爲空時 placeholder部分隱藏

問題敘述

• 將textarea標籤做爲組件，且placeholder內容長度超過一行。
  
• 在文本區域輸入文字，又把文字刪除後，placeholder被部分隱藏，可是把ios鍵盤收起後，placeholder的內容又徹底顯示。
  
• 問題涉及區域：ios、Safari
  
• 相同問題：https://segmentfault.com/q/1010000018649818
  

狀況圖列：

狀況1: text-area與placeholder的font-size、line-height相同。
狀況2: text-area的font-size、line-height不變，placeholder的font-size、line-height設小。

步驟	狀況1	狀況2
打開文本輸入框(起始狀態)
在文本區域輸入內容
刪除輸入的內容後，placeholder被截斷，收起ios鍵盤後與起始狀態一致

注意: 刪除輸入內容且未收起ios鍵盤時，placeholder是被截斷，其截斷的高度爲text-area的line-height，而不是placeholder只顯示一行。

解決方案

對textarea添加input事件監聽，當textarea的value值爲空時，經過改變textarea的樣式，讓textarea從新渲染。

相關代碼

<template>
    <textarea
        autofocus
        :class="['text-area', isTextEmpty ? 'plain' : '']"
        :placeholder="textAreaPlaceholder"
        v-model="value"
        @input = "inputFunc"
    ></textarea>
</template>
複製代碼

<script>
    export default {
        props: {
            textAreaPlaceholder: {
                type: String
            },
        },
        data() {
            return {
                value: '',
                isTextEmpty: false
            };
        },
        methods: {
            inputFunc() {
                let ua = navigator.userAgent.toLowerCase();
                let isIOS = /iphone|ipod|ipad/i.test(ua);
                let isSafari = /safari/i.test(ua);
                if (!isIOS && !isSafari) {
                    return;
                }
                // 當文本區域內容爲空，經過更改樣式使其從新渲染
                this.isTextEmpty = !this.value;
            },
        }
    }
</script>
複製代碼

<style lang="less">
    .text-area {
        box-sizing: border-box;
        width: 6.884rem;
        height: 3.2rem;
        margin: 0 auto;
        padding: 0.2264rem 0.2536rem;
        border: 1px solid #f29b76;
        border-radius: 0.0905rem;
        background: #fff;
        overflow-y: scroll;
        resize: none;
        font-size: 0.3261rem;
        line-height: 0.3804rem;
        &.plain {
            // 隨便更改text-area中的某個樣式，微調。
            padding: 0.2263rem 0.2536rem;
        }
    }
</style>
複製代碼