Як динамічно змінювати Placeholder у полях форми за допомогою JavaScript

Привіт:) У цій статті покажу як змінити атрибут placeholder у полях форми за допомогою JavaScript.

Атрибут placeholder є надзвичайно важливим елементом UX (користувацького досвіду). Він підказує користувачеві, які саме дані очікуються у полі введення. Проте іноді виникає потреба змінити цей текст "на льоту" — наприклад, залежно від мови інтерфейсу, вибраної опції або статусу авторизації користувача.

Базовий приклад

Розглянe стандартну структуру форми та скрипт, який знаходить поля за їхніми ID та перезаписує значення атрибута placeholder.

HTML-розмітка

<form action="">
  <label for="name">Name:</label><br>
  <input type="text" id="form-field-name" name="name" placeholder="Your name..."><br>
  <label for="email">Email:</label><br>
  <input type="email" id="form-field-email" name="email" placeholder="Your email..."><br>
  <input type="submit" value="Submit">
</form>

JavaScript-логіка

let formInputName  = document.querySelector('#form-field-name');
let formInputEmail = document.querySelector('#form-field-email');

if (formInputName) {
  formInputName.placeholder = '!new name!';
}

if (formInputEmail) {
  formInputEmail.placeholder = '!new email!';
}

Як це працює?

1. Пошук елементів. Ми використовуємо метод document.querySelector(), щоб знайти елементи за їх унікальними ідентифікаторами (#form-field-name).
2. Перевірка на існування. Конструкція if (formInputName) є критично важливою. Вона запобігає появі помилок у консолі (наприклад, TypeError: Cannot set property 'placeholder' of null), якщо скрипт запуститься на сторінці, де такої форми немає.
3. Зміна властивості. Ми звертаємося напряму до властивості .placeholder об'єкта DOM-елемента та присвоюємо їй новий рядок.

Розширені можливості

Якщо у вас багато полів, прописувати умови для кожного окремо — не найкраща ідея. Розглянемо більш професійні підходи.

Масове оновлення через об'єкт

Ви можете створити словник значень, щоб зробити код чистішим:

const placeholders = {
  '#form-field-name': 'Введіть ваше ім’я',
  '#form-field-email': 'Введіть ваш e-mail'
};

Object.entries(placeholders).forEach(([selector, text]) => {
  const input = document.querySelector(selector);
  if (input) {
    input.placeholder = text;
  }
});

Зміна при події (наприклад, при фокусі)

Іноді корисно змінювати текст, коли користувач починає взаємодіяти з полем:

const nameInput = document.querySelector('#form-field-name');

if (nameInput) {
  nameInput.addEventListener('focus', () => {
    nameInput.placeholder = 'Пишіть швидше!';
  });

  nameInput.addEventListener('blur', () => {
    nameInput.placeholder = 'Your name...';
  });
}

Висновок

Динамічне керування атрибутами форм робить ваш інтерфейс живим та адаптивним. Хоча метод зі статті є базовим, він закладає фундамент для створення складних форм, які реагують на дії користувача в реальному часі.