https://www.hotelmanagement-network.com/wp-content/themes/goodlife…/js/modules/GDMMovePlaceholdersOnFocus.js

1export default function GDMMovePlaceholdersonFocus(
2  textInputSelectors,
3
4  emailInputSelectors,
5
6  selectSelectors,
7
8  textareaSelectors
9) {
10
11  const textInputs = document.querySelectorAll(textInputSelectors);
12  const emailInputs = document.querySelectorAll(emailInputSelectors);
13  const selects = document.querySelectorAll(selectSelectors);
14  const textareas = document.querySelectorAll(textareaSelectors);
15
16  const allInputs = [...textInputs, ...emailInputs, ...selects, ...textareas];
17
18  allInputs.forEach((input) => {
19
20    const pseudoPlaceholder = document.createElement("div");
21    pseudoPlaceholder.classList.add("placeholder-focus");
22    pseudoPlaceholder.textContent = input.placeholder;
23
24    input.insertAdjacentElement("beforebegin", pseudoPlaceholder);
25
26    input.addEventListener("focus", () =>
27      input.parentElement.classList.add("focus")
28    );
29
30    input.addEventListener("focusout", () =>
31      input.parentElement.classList.remove("focus")
32    );
33  });
34}