Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon 🙏🙏🙏
Learn how to animate the value of the placeholder attribute with JAVASCRIPT

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.

Markup Code

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


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


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

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

function placeholderAnimation(){


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



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



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



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


//call or execute function

//Continues|repeats to call the function every after 8 milliseconds


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

Related Post(s)

» Learn how to animate the value of the placeholder attribute with JAVASCRIPT

» Learn how to create a progress bar using JavaScript

» How to detect whether the browser is online or offline using Javascript

» Here are some games made with javascript

» Learn how to Switch Between Dark and Light Mode With CSS and Javascript

collections_bookmark Category :: Javascript
date_range Published :: 9 months ago At: 10:19 PM
event_note Detailed Date :: Nov 12th, 2019
person Writer :: Code