newline char \n for <textarea> placeholder is ignored on Safari

Question

I see that this question has been asked here already, but no answer was provided so far. I'm trying to add a multi-line placeholder for a textarea using jQuery. My code looks like this:

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

this works great in Chrome, but fails to work on Safari. I tried using instead of \n but that failed to work at chrome as well. \r\n did the same as \n, worked for chrome but not for Safari.

Any ideas what else can I do?

Answer 1

This is maybe a Safari limitation, so one idea is to emulate the placeholder.

All we need to do is place transparent div over the top of the textarea, and then make this visible / invisible based on the value.

Also disable mouse select & pointer events to prevent the div capturing, these are just simple css pointer-events & user-select css properties..

Below is an example.

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>