Мобильная версия сайта.(input)

Question

Здраствуйте, такая проблема, есть сайт, и на нем есть инпут с placeholder , как сделать так что при изменении екрана под телефон плейсхолдер также менялся?

let currentWidth = document.documentElement.clientWidth
let pls = document.getElementById("pls")


if (currentWidth < 575) {
  pls = pls.setAttribute("placeholder", "lololo")
}
else {
  pls = pls.setAttribute("placeholder", "laaaaa")
}

Answer 1

Проверяете ширину экрана, и если она меньше какого-то условного "мобильного" размера, меняете значение плейсхолдера:

function changePlaceHolder() {
  if($(window).width() < 576) {
    $('input').attr('placeholder', 'Здравствуйте все');
  }
  else {
    $('input').attr('placeholder', 'Здравствуйте');
  }
}

changePlaceHolder();

$(window).resize(function(){
  changePlaceHolder();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Здравствуйте">

В принципе можно сделать имитацию плейсхолдера и смену его содержимого на чистом css (без js/jquery), но придётся пошаманить со стилями:

input {
  background: none;
}
input:valid {
  background-color: white;
}
div {
  position: relative;
}
div:focus-within:before {
  display: none;
}
div:before {
  content: attr(data-desktop);
  position: absolute;
  left: 5px;
  top: 1px;
  color: gray;
  z-index: -1;
}
@media (max-width: 575px) {
  div:before {
    content: attr(data-mobile);
  }
}

<div data-desktop="Здравствуйте" data-mobile="Здравствуйте все">
<input type="text" required>
</div>

БЛОГ НА HUSL

Мобильная версия сайта.(input)

Ответы (1 шт):