In this blog post you’ll learn how to create dynamic placeholder values that change with typing effect using JavaScript.
How it Works:
On window load the placeholder value starts changing with typing effect. As we have added functionality to placeholder attribute value. When user starts writing, the placeholder by default hides and if there is no value inside the input field the placeholder is visible again with changing value with typing effect.
Video Tutorial On Dynamic Placeholder With Typing Effect.
Dynamic Placeholder With Typing Effects.
File structure:
- Create one folder
- Open it in your code editor
- Create two files in that folder with name index.html and index.css
Let’s create a dynamic placeholder with a typing effect using HTML CSS and JavaScript.
Step 1: Create basic structure of HTML and Design the input field.
First, let's design the input field along with adding a placeholder attribute.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Placeholder. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<form action="#">
<div class="input_box">
<input type="text" class="text" placeholder="Search" required>
</div>
</form>
</div>
</body>
</html> CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #bd24d4, #5c34ff);
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
background-color: #fff;
padding: 30px;
border-radius: 5px;
}
input {
width: 100%;
font-size: 30px;
padding: 10px 0px;
border: none;
border-bottom: 2px solid #000;
outline: none;
}
Output:
We’ve successfully created the design. The placeholder is not dynamic yet. Let's make it dynamic using JavaScript.
Step 2: Define the variables in JavaScript.
Let's create the variables.
JavaScript
// Selecting the input field.
let text = document.querySelector(".text");
// Storing different texts in an array. This text will display in the placeholder with typing effect.
let text_array = ["HTML", "CSS", "JavaScript", "PHP"];
// Use as a index value to array(text_array) to extract the item to set in the placeholder.
let t = 0;
// For settimeouts.
let settimeout_1;
let settimeout_2;
After defining the variables lets create the call and create the function to change the placeholder value with typing effect.
Step 3: Create a function to change the placeholder value with typing effect.
Within this function:
- We’ll increase the 't' variable by 1 ('i' variable serves as an index for the 'text_array' array), clear the timeouts and remove the placeholder's current value, leaving it blank.
- Then we’ll extract the item from the array (text_array) based on i variable value. Then we’ll split the extracted item into an array of individual characters. This character array is stored in a variable named 'array'. So now we get the array of extracted array items and stored in an array variable.
- After that with the combination of a 'for' loop and the 'setTimeout' method. Each character within 'array' is added to the input field's placeholder with a delay according to its index; this will create a visual typing effect.
- Then we’ll call the function again ('change_placeholder_value()') after a 1-2 second delay. This will display the other (sequential item) items from the array according to t variable value.
- Lastly, we’ll also add another conditional statement to repeat the array text again if it reaches the last one.
See below code:
JavaScript
// Call function to change the value of placeholder with typing effect.
change_placeholder_value();
// Creating the function to change the value of placholder with typing effect.
function change_placeholder_value() {
// Clearing the setTimeout which is applied below for previous text in placeholder.
clearTimeout(settimeout_1);
clearTimeout(settimeout_2);
// Clearing the placeholder value.
text.placeholder = "";
// Increasing the t variable value by one. This value use as a index value in array(text_array) to extract the item from it.
t++;
// Spliting the extracted item from array(text_array) into an array of characters and store that character array inside variable named array.
let array = text_array[t - 1].split("");
// With combination of for loop and setTimeout method, we'll display each current array item in placeholder one by one. Making an typing effect.
for (let i = 0; i < array.length; i++) {
const element = array[i];
// Making the typing effect.
settimeout_1 = setTimeout(() => {
text.placeholder += element;
// Checking the current array is displayed or not. If displayed then we call the function again to show another item from array(text_array).
if (i === array.length - 1) {
settimeout_2 = setTimeout(() => {
change_placeholder_value();
}, 2000);
}
}, i * 100);
}
// Repeat the text from array(text_array) if reached the end.
if (t === text_array.length) {
t = 0;
}
}
Output:
Final code:
So that's how you can create a dynamic placeholder that changes its value automatically with typing effect. If you have any query or suggestion feel free to write in the comment section.
Share your thoughts.