<textarea> 占位符的换行符 \n 在 Safari 上被忽略
Posted
技术标签:
【中文标题】<textarea> 占位符的换行符 \\n 在 Safari 上被忽略【英文标题】：newline char \n for <textarea> placeholder is ignored on Safari<textarea> 占位符的换行符 \n 在 Safari 上被忽略 【发布时间】：2020-05-20 10:54:00 【问题描述】：我看到这里已经有人问过这个问题，但到目前为止还没有提供答案。 我正在尝试使用 jQuery 为 textarea 添加多行占位符。 我的代码如下所示：
$('#ticket_id').attr('placeholder' , 'first line \nsecond line \nthird line')
这在 Chrome 中运行良好，但在 Safari 上无法运行。 我尝试使用 而不是 \n 但这也无法在 chrome 上工作。 \r\n 与 \n 一样，适用于 chrome，但不适用于 Safari。
我还能做什么？
【问题讨论】：
这能回答你的问题吗？ Insert line break inside placeholder attribute of a textarea? 从所有建议中唯一有效的是 Jason Gennaro 的函数，但问题是我的 如果这是 Safari 的限制，也许一个想法是创建一个透明的 div，它位于 textArea 的顶部，如果内容为空则显示，如果不是则隐藏.. 【参考方案1】：文本区域字段中的换行符 (\n) 在 Chrome 中按预期工作。但是，Safari 默认样式表会覆盖这些换行符。
我们可以通过向文本区域添加背景图像来模拟占位符。
如果文本区域中没有文本，则显示背景图像。如果 textarea 处于焦点位置，或者有值，则不显示背景图像。
<TextField
onChange=onTexfieldChange
value=textAreaValue
id='text-area-img-placeholder'
style=backgroundImage: (textAreaValue) && 'none'
/>
我在 React 中使用样式化组件，但您可以将 TextField 替换为 html 文本区域。
TextField的style属性保证如果textarea(textAreaValue)中有值，则背景图片被移除。
#text-area-img-placeholder
background-image: url(./fileName.png);
background-repeat: no-repeat;
background-size: contain;
#text-area-img-placeholder:focus
background-image: none;
添加此 CSS 以覆盖整个文本区域的背景图像。当 HTML 成为焦点时，移除背景图片。
【讨论】：
【参考方案2】：这可能是 Safari 的限制，所以一个想法是模拟占位符。
我们需要做的就是将透明的 div 放在 textarea 的顶部，然后根据值使其可见/不可见。
还禁用鼠标选择和指针事件以防止 div 捕获，这些只是简单的 css pointer-events & user-select css 属性..
下面是一个例子。
const ta = document.querySelector('textarea');
const pp = document.querySelector('.placeholder');
console.log(ta);
ta.addEventListener('input', () =>
pp.classList.toggle('hidden', ta.value !== '');
);.holder
position: relative;
overflow: hidden;
.placeholder
pointer-events: none;
user-select: none;
position: absolute;
color: silver;
padding: 0.2rem 0.2rem;
.hidden
display: none;
textarea
width: 200px;
<div class="holder">
<div class="placeholder">
This is the place holder<br>
Multiline<br>
Ok?
</div>
<textarea required="true" rows="5"></textarea>
</div>【讨论】：
【参考方案3】：&#x0a; 用于在占位符中换行。
为 safari 添加额外的脚本来处理多行占位符。以下脚本需要 jQuery。
$(function()
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Disable for chrome which already supports multiline
if (! (!!window.chrome && !isOpera))
var style = $('<style>textarea[data-placeholder].active color: #ccc; </style>')
$('html > head').append(style);
$('textarea[placeholder]').each(function(index)
var text = $(this).attr('placeholder');
var match = /\r|\n/.exec(text);
if (! match)
return;
$(this).attr('placeholder', '');
$(this).attr('data-placeholder', text);
$(this).addClass('active');
$(this).val(text);
);
$('textarea[data-placeholder]').on('focus', function()
if ($(this).attr('data-placeholder') === $(this).val())
$(this).attr('data-placeholder', $(this).val());
$(this).val('');
$(this).removeClass('active');
);
$('textarea[data-placeholder]').on('blur', function()
if ($(this).val() === '')
var text = $(this).attr('data-placeholder');
$(this).val(text);
$(this).addClass('active');
);
);<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<textarea rows="5" placeholder="first line 
second line 
third line"></textarea>
</body>
</html>【讨论】：
以上是关于<textarea> 占位符的换行符 \n 在 Safari 上被忽略的主要内容，如果未能解决你的问题，请参考以下文章