Javascript 换行符\n用于<；textarea>；占位符在Safari上被忽略

我看到这里已经有人问过这个问题，但到目前为止还没有回答。 我正在尝试使用jQuery为textarea添加多行占位符。 我的代码如下所示：

$('#ticket_id').attr('placeholder' , 'first line \nsecond line \nthird line')

这在Chrome中效果很好，但在Safari上却不起作用。 我试着用 而不是\n但在chrome上也无法工作。 \r\n的操作与\n相同，为chrome工作，但不为Safari工作

---

你知道我还能做什么吗？

这可能是一个狩猎限制，所以一个想法是模仿占位符

我们所需要做的就是将透明div放置在textarea的顶部，然后根据该值使其可见/不可见

还禁用鼠标选择和指针事件以防止捕获div，这些只是简单的css

指针事件

&

用户选择

css属性

下面是一个例子

const ta=document.querySelector（'textarea'）；
const pp=document.querySelector（'.placeholder'）；
控制台日志（ta）；
ta.addEventListener（'input'，（）=>{
pp.classList.toggle（'hidden'，ta.value！=''）；
});
.holder{
位置：相对位置；
溢出：隐藏；
}
.占位符{
指针事件：无；
用户选择：无；
位置：绝对位置；
颜色：银色；
填充：0.2rem 0.2rem；
}
.隐藏{
显示：无；
}
文本区{
宽度：200px；
}

这是占位符

多行

好啊
文本区域中的换行符（\n）在Chrome中按预期工作。但是，Safari默认样式表会覆盖这些换行符

我们可以通过向文本区域添加背景图像来模拟占位符

如果文本区域中没有文本，则显示背景图像。如果文本区域处于焦点位置，或存在值，则不显示背景图像

<TextField
  onChange={onTexfieldChange}
  value={textAreaValue}
  id={'text-area-img-placeholder'}
  style={{backgroundImage: (textAreaValue) && 'none'}}
/>

添加此CSS以覆盖整个文本区域的背景图像。当HTML处于焦点时，删除背景图像。
这是否回答了您的问题？所有建议中唯一有效的是Jason Gennaro的函数，但问题是my是必填字段。因此，如果在用户插入之前已填充了文本，则必填字段将无效。如果这是Safari的一个限制，也许可以创建一个位于文本区域顶部的透明div，显示内容是否为空，如果不是，则隐藏。。
<TextField
  onChange={onTexfieldChange}
  value={textAreaValue}
  id={'text-area-img-placeholder'}
  style={{backgroundImage: (textAreaValue) && 'none'}}
/>