In this article we going to make custom dynamic placeholder using html CSS and JavaScript. We going to make search bar and, in that search bar, we going to add our custom dynamic placeholder that change multiple text one by one with animation. You can see demo in below YouTube video.
Placeholder is use to tell user that which value that input field is expecting.
You can add placeholder in input field by adding placeholder attribute and its value.
That’s the default placeholder you get in you input field. In this blog post we going to make dynamic placeholder that change text automatically with animation. And behave similar like default placeholder. That make web forms, login pages, and other user interfaces more engaging and user-friendly. This guide include source code, step by step process, screenshot, video tutorial, demo video etc..
So, for the custom dynamic placeholder we aren’t going to add default attribute of placeholder in input field. Instead, we going to add another element (and make it functional to change text with animation) and place it upon input field (so that it looks like placeholder).
You’ll learn in this blog:
- How to create custom placeholder.
- How to create dynamic placeholder.
- How to create changing text animation.
- How to make text changing placeholder.
- How to create search bar with animating placeholder.
Video Tutorial on Custom Dynamic Placeholder.
Custom Dynamic Placeholder.
How we going to change text of placeholder with animation (Basic description)?
So, we going to do it with JavaScript. First, we going to form array and add list items to it. Then one by one with set interval function we going to add array list item to placeholder text (here placeholder is another HTML elements that we going to make it look like a placeholder).
File Structure:
- Create one folder
- Open that folder in your code editor.
- Create two files in that folder with name index.html and index.css
I've integrated JavaScript within the HTML file.
Let's start creating custom dynamic animated placeholder using html CSS & JavaScript step by step.
Step 1: Create Basic structure of search bar using html & CSS.
First let’s create basic design of search bar using HTML and CSS.
Here we aren’t going to add placeholder attribute to input field because instead we going to place another div element upon search bar (input field) to looks as placeholder.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Placeholder</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="search_bar">
<div class="input_box">
<!-- Search Icon -->
<!-- This is just for search icon. You can simply use image also -->
<div class="search_container">
<div class="circle"></div>
<div class="line"></div>
</div>
<!-- Search Icon ends -->
<input type="text" class="input">
<!-- Placeholder -->
<!-- Placeholder ends-->
</div>
</div>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0px;
margin:0px;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #F06292, #9575CD);
display: flex;
align-items: center;
justify-content: center;
}
.search_bar{
width: 500px;
border-radius: 100px;
background-color: #fff;
}
.input_box{
position: relative;
display: flex;
align-items: center;
margin: 5px 20px;
}
/* ---------- Search Icon ---------- */
.search_container{
margin-right: 20px;
padding-top: 8px;
}
.circle{
width: 16px;
height: 16px;
display: block;
border: 3px solid #000;
border-radius: 100px;
}
.line{
width: 3px;
height: 12px;
border-radius: 100px;
background-color: #000;
transform: translate(19px, -5px) rotate(-45deg);
}
/* ---------- Search Icon ends---------- */
input{
width: 100%;
font-size: 25px;
padding: 10px 0px;
border: none;
outline: none;
}
Output:
Here we have made a simple design of search bar.
Now let’s create custom placeholder for search bar, later it will going to be dynamic.
We going to add that placeholder code inside the comment which I have added in above html file (see above code).
Step 2: Create custom placeholder for search bar.
So, we going to make placeholder in two parts one (class="box") part will be static and another part will be dynamic, means that another part (class="slider_box") will be move and change text.
HTML
<!-- Placeholder -->
<div class="placeholder">
<div class="box">
<p>Search for</p>
</div>
<div class="slider_box">
<div class="slider"></div>
</div>
</div>
<!-- Placeholder ends-->
CSS
.placeholder{
position: absolute;
left: 40px;
top: 10px;
display: flex;
align-items: center;
pointer-events: none;
color: #989898;
}
.box{
font-size: 25px;
margin-right: 10px;
}
.slider_box{
position: relative;
}
.slider{
position: absolute;
left: -5px;
opacity: 0;
font-size: 25px;
transition: 0.5s;
}
Output:
As you can see above, that simple search bar is ready.
The text “search for” is going to be static. And in the second part the placeholder will move and change the text, which has a class slider inside slider_box class.
Right now, I don’t add text in slider class. Because we're going to add, change, and animate text inside the slider class by JavaScript.
So, let’s add JavaScript to make placeholder dynamic, animated and ability to change text.
Step 3: Add JavaScript to make custom placeholder dynamic.
So first we going to define variables.
JavaScript
let input = document.querySelector(".input");
let slider_box = document.querySelector(".slider_box");
let slider = document.querySelector(".slider");
let placeholder = document.querySelector(".placeholder");
let list = ["HTML" , "CSS" , "JavaScript" , "PHP"];
let i = 0;
let intervals = "";
As you can see above JavaScript code that I have created list, i and intervals variable.
list variable is for list items that we are going to display in placeholder (slider class) one by one.
The i variable is for checking that array length (list variable) is equal to i value or not, because we are going to increment i value by 1 every time function call, when array length is equal to, i value we are going to set i value again to 0 as initial.
And also, we are going to display array items one by one based on i variable value.
intervals variable is for storing the setinterval method. (So, we can clear it).
Now let’s call functions.
JavaScript
text_animation();
setintervals();
text_animation() function is for changing and animating text inside the search bar (inside element with class="slider").
setintervals() function is for calling text_animation() function again and again with the setinterval method.
After calling the functions, we have to add one line of JavaScript to give height to the placeholder's second part (the sliding part.). See below code line.
JavaScript
// This below javascript line is give height to slider_box class. It won't get its inner element height (slider class), because it set to position absolute.
slider_box.style.height = slider.clientHeight + "px";
Here I have set slider_box height equal to slider height. It should be run after the functions, because then only the slider_box class will get height when text appears in it. Because the slider is positioned absolute to the slider_box class.
Now let’s create those functions which we have called above.
JavaScript
// Functionality to animate the text;
function setintervals(){
intervals = setInterval(() => {
text_animation();
console.log("started");
}, 2500);
}
function text_animation(){
i++;
slider.innerHTML = list[i - 1];
slider.style.opacity = "1";
slider.style.left = "0px";
setTimeout(() => {
slider.style.opacity = "0";
slider.style.left = "-5px";
}, 2000);
if(list.length == i){
i = 0;
}
}
Note: Here I use settimeinterval method for calling text_animation() method. And inside text_animation() function I used settimeout method, so here make sure you add settimeinterval time greater than settimeout method.
Now the custom dynamic placeholder is working, Means its changing texts with animation.
But we also have to make it behave similar like a default placeholder. Means when user focus in input field and it input field has value, it should be disappeared and when user unfocused and input field and doesn’t have value in it, it should reappear.
So, for that we need to add some function that run on some event and also need to add some conditions.
So, lets add function that run on focus on input field, so when user focus, we going to disappears the whole custom placeholder. And also, we going to clear the interval because we don’t want to show placeholder so no need to run animation.
And also add another function on blur of input field means on unfocused of input field. In that function we'll check empty input field if it is empty we'll display the custom placeholder and set i variable value to 0 and run the text_animation() and setintervals() function again so that animation run from starting.
Note: Here I use setinterval method for calling text_animation() method. And inside the text_animation() function I used settimeout method, so here make sure you add setinterval time greater than settimeout method.
Now the custom dynamic placeholder is working, Means its changing texts with animation.
But we also have to make it behave similarly like a default placeholder. Means when the user focuses on the input field or input field has value, it should disappear and when the user unfocused the input field or it doesn’t have value in it, it should reappear.
So, for that we need to add some function that runs on some event and also need to add some conditions.
So first, let's add a function that runs on focus on the input field, so when the user focuses, we are going to disappear the whole custom placeholder. And also, we are going to clear the interval because we don’t want to show placeholders so no need to run animation.
And also add another function on blur of input field means on unfocused input field. In that function we'll check the empty input field. If it is empty we'll display the custom placeholder and set i variable value to 0 and run the text_animation() and setintervals() function again so that animation runs from starting.
JavaScript
// Functionality to hide custom placeholder when input field is focused or it has value inside it.
input.onfocus = function(){
placeholder.style.display = "none";
clearInterval(intervals);
}
input.onblur = function(){
if(input.value == ""){
placeholder.style.display = "flex";
i = 0;
text_animation();
setintervals();
}
}
So that’s it you can see demo in above YouTube video.
You may like:
- Create random captcha generator using JavaScript.
- How to create a simple search bar design using HTML and CSS.
- How to create a simple floating placeholder using HTML and CSS.
- How to create a input field border animation using HTML and CSS.
- How to make one input field value same as another input field value on click.
- Create input field that accept only alphanumeric characters using JavaScript.
Final code:
So that’s how you can make custom dynamic placeholder using html CSS and JavaScript. If you have any query or suggestion you can write in comment section.
Share your thoughts.