fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
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.

Video/Tutorial
Markup Code

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

copy
	
<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
copy

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

Related Post(s)

» How to change the image source attribute using Javascript

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

» Create a simple currency converter - HTML/Javascript

» Learn how to create a progress bar using JavaScript

» How to create Custom Social Media Share Buttons Using JavaScript

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

YOU MAY LIKE THESE POSTS

share