在Safari上<textarea>的占位符中使用的换行符\n被忽略

Question

在Safari上<textarea>的占位符中使用的换行符\n被忽略

javascriptjquerytextareanewlineplaceholder

4

我发现这个问题已经在这里被问过了，但是迄今为止没有提供答案。我正在尝试使用jQuery为文本区域添加多行占位符。我的代码如下：

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

这在Chrome中效果很好，但在Safari上无法正常工作。我尝试使用
代替 \n 但这也不能在chrome中正常工作。 \r\n 和 \n 的效果一样，在Chrome中可以工作但在Safari上不行。

还有其他的想法吗？

- Tal E

这个回答解决了你的问题吗？在textarea的placeholder属性中插入换行符？ - Jeremy Harris

所有建议中唯一有效的是Jason Gennaro的函数，但问题在于我的<textarea>是必填字段。因此，如果用户插入之前<textarea>已经填写了文本，则必填字段将变得无效。 - Tal E

如果这是Safari的限制，也许一个想法是创建一个透明的div，放在textArea上方，如果内容为空则显示，否则隐藏。 - Keith

4个回答

2

这可能是Safari的限制，因此一个想法是模拟占位符。

我们需要做的就是在文本框上方放置透明的div，然后根据值使其可见/不可见。

还要禁用鼠标选择和指针事件以防止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>

- Keith

比背景图hack更好的解决方案。谢谢。 - Avatar

1


 用于在占位符中换行。
对于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>

- jay chaudhary

很遗憾，截至2022年11月，在移动版Safari上使用也无法生效。 - Judah Gabriel Himango

0

以下是一种在字符串中直接设置换行的方法。但是，在Safari中它也不起作用。

HTML：

<textarea></textarea>

Javascript/Jquery：

var placeholder_text = `• First line
• Second line
• Third line`;

$(document).ready(function()
{
    $('textarea').attr('placeholder', placeholder_text)
});

JSFiddle: https://jsfiddle.net/gt1ry6d0/2/

JSFiddle：https://jsfiddle.net/gt1ry6d0/2/

- Avatar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dana Sevcik · Accepted Answer

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

我在React中使用了styled components，但您可以将TextField替换为HTML textarea。

TextField的样式属性确保如果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处于焦点状态时，删除背景图像。