safari浏览器textarea标签的placeholder多行时显示不全

我就是我 2023-06-28 06:23 11阅读 0赞

问题：使用textarea标签时，placeholder的内容很长，会换行，首次显示正常，当输入内容后，在清除，就会只显示placeholder的第一行内容，其之后的就看不到了  
解决方案：使用js动态的重绘textarea标签，来使placeholder显示完成  
调试解决：通过调试我发现，清除内容后，展示的placeholder只有一行，j经过反复调试属性，发现和textarea标签的重绘有关系，我感觉应该是重绘没有完成，就手动的添加了一个position = ‘relative’，发现就正常了，解决代码如下

解决方案代码：  
我的项目是个vue项目

<template>
        <div>
            <textarea class="__textarea"
                      ref="textarea"
                      v-bind:value="value"
                      v-on:input="updateValue($event.target.value)"
                      :placeholder="placeholder"></textarea>
        </div>
    </template>
    <script>
    export default {
        methods: {
            updateValue: function (value) {
                if (value === '') {
                    this.placeholderShowBug()
                }
                this.provetext = value;
                var formattedValue = value;
                if (formattedValue !== value) {
                    this.$refs.textarea.value = formattedValue
                }
                // 通过 input 事件发出数值
                this.$emit('input', formattedValue)
            },
            placeholderShowBug () {
                if (document.querySelector('.__textarea').style.position !== 'relative') {
                    document.querySelector('.__textarea').style.position = 'relative'
                } else {
                    document.querySelector('.__textarea').style.position = 'static'
                }
            }
        },
    };
    </script>

网上有设置textarea的fontSize大于placeholder的fontSize的方法，测试结果如下  
设置textarea的fontSize的方法有两种情况是可以显示完全  
1、textarea的fontSize是placeholder的fontSize的倍数，要显示几行就是几倍，可以显示完全  
2、当placeholder的内容很多会异常文本框显示的时候，也可以正常显示

textarea {
        font-size: 12px;
    }
    textarea::-webkit-input-placeholder {
        font-size: 11px;
    }
    textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        font-size: 11px;
    }
    textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        font-size: 11px;
    }
    textarea:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        font-size: 11px;
    }