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 Switch Between Dark and Light Mode With CSS and Javascript

» How to Animate Font Awesome Icons With Javascript

» How to create a Digital Clock using JavaScript

» Here are some games made with javascript

» How to create a Dynamic GO BACK button on a 404 Error Page

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