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>
复制代码