In case you have ever thought of animating the value of the placeholder attribute in an Html form input field, I have you covered in this simple post.

We are going to make this possible using javascript and a little bit of CSS to design the placeholder value.

Video/Tutorial

Markup Code

All you need to do is to give your input field an id, Which we will later target using javascript.

	
<form>

  <input type="text" id="occEngine" placeholder="Search for: Jquery">

</form>

For our animation to happen we will use the two popular javascript methods namely;

• setTimeout() and
• setInterval().

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Note: 1000 milliseconds = 1 second

The setTimeout() method is only executed once,but incase you want to repeat it you use the setInterval() method as i showed you in the video. #Video

Javascript Code

//Waits the for DOM to fully load before running the code inside
document.addEventListener('DOMContentLoaded',function(){

//select the input by it's id
const query = document.querySelector('#occEngine');


function placeholderAnimation(){

setTimeout(function(){

query.setAttribute('placeholder','Search for: Php');

},2000);


setTimeout(function(){

query.setAttribute('placeholder','Search for: Html');

},4000);


setTimeout(function(){

query.setAttribute('placeholder','Search for: Css');

},6000);

setTimeout(function(){

query.setAttribute('placeholder','Search for: Javascript');

},8000);
}


//call or execute function
placeholderAnimation();


//Continues|repeats to call the function every after 8 milliseconds
setInterval(placeholderAnimation,8000);

});

The setInterval() method calls a function at specified intervals in milliseconds.It will always continue calling the function until clearInterval() is called, or the window is closed.

In case you want to download the source code:: Click here description