Как изменить placeholder элемента через js?

Question

[Шамиль Хайрулаев]

Есть поле ввода пароля. У него стоит плейсхолдер "пароль". Мне нужно, чтобы при вводе слишком короткого пароля плейсхолдер изменялся.

Спасибо заранее. В гугле есть где показывают как изменить с помощью jquery, а чистого js я не нашел. Заранее извиняюсь, если вопрос глупый.

Comments

[Ankhena]

Мне нужно, чтобы при вводе слишком короткого пароля плейсхолдер изменялся.

Когда в поле что-то введено, плейсхолдер вообще не показывается...

Делайте рядом блочик (p, span, div) и в него выводите текст ошибки.

Answer 1

[Sun_Day]

const input = document.querySelector(".placeholder");

input.addEventListener("keydown", (e) => {
    const condition = e.target.value.length < 5 ? "new" : "password";
    input.placeholder = condition;
})

<input class="placeholder" placeholder="password">

Но как указали в комментарии - лучше выводить какой-то текст рядом, потому что в плейсхолдере он скрывается введенным текстом. Например:

const input = document.querySelector(".placeholder");
const output = document.querySelector(".for-error");

input.addEventListener("input", (e) => {
     const condition = e.target.value.length < 5 ? "the password is too short" : "";
     output.textContent = condition;
})

<input class="placeholder" placeholder="password">
<span class="for-error"></span>

Ну и поподробнее изучить тему валидации форм.
click

Comments

[Шамиль Хайрулаев]

Спасибо большое. Я же очищаю форму, если логин короткий. Так что будет видно)

[Шамиль Хайрулаев]

А вы не знаете как передать переменную из php файла в js файл? Только без фреймворков и сторонних библиотек

[Sun_Day]

Шамиль Хайрулаев, никогда не работал с пхп. Наверняка, передать строкой/json'ом в жс файл. Тут уже не знаю как, мб получить через fetch жса со стороны пхп сервера.

[Шамиль Хайрулаев]

Sun_Day, Понял, спасибо