将多行占位符添加到 textarea 输入的非 JQuery 跨浏览器解决方案

【问题标题】：Non-JQuery cross-browser solution to add a multiline placeholder to a textarea input将多行占位符添加到 textarea 输入的非 JQuery 跨浏览器解决方案
【发布时间】：2021-04-26 12:14:54
【问题描述】：

这个问题的灵感来自Insert line break inside placeholder attribute of a textarea?

我没有找到完整的接受答案——部分原因是我不使用 JQuery，部分原因是如果用户输入的字符串与占位符完全相同，则输入将在重新聚焦时被删除。此外，Safari 不支持在占位符中使用 &#10;。

是否有任何跨浏览器非 JQuery 解决方案来为文本区域创建多行占位符？

【问题讨论】：

标签： javascript textarea placeholder multiline

【解决方案1】：

回答我自己的问题 - 使用数据集属性来检查文本区域的“值”是由用户输入还是来自占位符。

function addMultilinePlaceholder(textarea, placeholder) {
    // Does textarea have input entered by the user?
    textarea.dataset.hasValue = '';
    textarea.value = placeholder;

    textarea.addEventListener('focus', function () {
        if (!textarea.dataset.hasValue) {
            this.value = '';
        }
    });

    textarea.addEventListener('keyup', function () {
        textarea.dataset.hasValue = (textarea.value.length > 0) ? 'true' : '';
    });

    textarea.addEventListener('blur', function () {
        if (!textarea.dataset.hasValue) {
            this.value = placeholder;
        }
    });
}

小提琴：https://jsfiddle.net/fm4vyxjL/1/

【讨论】：