символ новой строки \ n для <textarea>заполнитель игнорируется в Safari

Question

Я вижу, что этот вопрос уже задавался здесь, но пока ответа не было. Я пытаюсь добавить многострочный заполнитель для текстовой области, используя jQuery. Мой код выглядит так:

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

это прекрасно работает в Chrome, но не работает в Safari. Я попытался использовать вместо \ n, но это не сработало и на chrome. \ r \ n сделал то же самое, что и \ n, работал для chrome, но не для Safari.

Есть идеи, что еще я могу сделать?

Answer 1

Это, возможно, ограничение Safari, поэтому одна идея состоит в том, чтобы эмулировать заполнитель.

Все, что нам нужно сделать, - это поместить прозрачный div поверх поверх текстовой области, а затем сделать его видимым / невидимым на основе значение.

Также отключите события выделения и указателя мыши, чтобы предотвратить захват div, это просто css pointer-events & user-select css properties ..

Ниже приведено пример.

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>