How to add a javascript class or selector on a placeholder text?

Question

I want to animate the placeholder text by javascript.

I want to add a claass or any other javascript selector with placeholder text so i can use that selector in javascript code.

Here is my code.

 ::-webkit-input-placeholder { /*Chrome/Opera/Safari */ font-family: 'Roboto', sans-serif; color: purple; font-weight: bold; font-size: 16px; } ::-moz-placeholder { /* Firefox 19+ */ font-family: 'Roboto', sans-serif; color: purple; font-weight: bold; font-size: 16px; } */ :-ms-input-placeholder { /*IE 10+ */ font-family: 'Roboto', sans-serif; color: purple; font-weight: bold; font-size: 16px; } input { font-size: 10px; color: #f7f102; background-color: #df935e; -webkit-rtl-ordering: logical; cursor: text; border-width: 0px; font-family: 'Major Mono Display', monospace; padding: 5px 35px 3px 26px; margin: 2px 2px 1px 2px; border-radius: 3px; }

 <div> <input type="text" placeholder="A placeholder"> </div>

Answer 1

This is not possible. Classes can only be applied to elements, not attributes. The best option is to apply a class to the input element itself and then use that to access the placeholder as necessary.

 const placeholder = document.querySelector('.placeholder') placeholder.addEventListener('focus', () => { placeholder.placeholder = "World" })

 <input class="placeholder" placeholder="Hello" />

Answer 2

Since the placeholder isn't an element, you can't access it directly. Functions like querySelector don't support pseudo-elements .

Instead, modify the styles around it to create the animation effect you want.

For example, define the colour with a CSS variable, use the transition property to cause changes to the colour to animate, and then change the CSS variable with JavaScript.

 function animate() { document.documentElement.style.setProperty("--placeHolderColor", "#fff") } setTimeout(animate, 500);

 html { --placeHolderColor: #000; } ::-webkit-input-placeholder { /*Chrome/Opera/Safari */ font-family: 'Roboto', sans-serif; color: var(--placeHolderColor); transition: color 2s; font-weight: bold; font-size: 16px; } ::-moz-placeholder { /* Firefox 19+ */ font-family: 'Roboto', sans-serif; color: var(--placeHolderColor); transition: color 2s; font-weight: bold; font-size: 16px; } */ :-ms-input-placeholder { /*IE 10+ */ font-family: 'Roboto', sans-serif; color: var(--placeHolderColor); transition: color 2s; font-weight: bold; font-size: 16px; } input { font-size: 10px; color: #f7f102; background-color: #df935e; -webkit-rtl-ordering: logical; cursor: text; border-width: 0px; font-family: 'Major Mono Display', monospace; padding: 5px 35px 3px 26px; margin: 2px 2px 1px 2px; border-radius: 3px; }

 <div> <input type="text" placeholder="A placeholder"> </div>