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>

This sounds very much like an XY problem. What do you want to do in JS that you think having a selector which matches the placeholder will help with? — Quentin, Jan 31 '19 at 12:24
Are you asking how to select all elements which have a `placeholder` attribute? — Nick Parsons, Jan 31 '19 at 12:25

score -1 · Answer 1 · answered Jan 31 '19 at 12:24

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" />

score -1 · Answer 2 · answered Jan 31 '19 at 14:25

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>

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

2 Answers2