<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 的函数，但问题是我的是必填字段。因此，如果 <textarea> 在用户插入之前已经填充了文本，则必填字段无效。
如果这是 Safari 的限制，也许一个想法是创建一个透明的 div，它位于 textArea 的顶部，如果内容为空则显示，如果不是则隐藏..

标签： javascript jquery textarea newline placeholder

【解决方案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 &#x0a;second line &#x0a;third line"></textarea>
  </body>
</html>

【讨论】：