This blog post will teach you how to create an animated input field placeholder using HTML, CSS, and JavaScript. The placeholder characters or letters will float up individually and sequentially, one by one, when the input field receives focus.
See How it Works:
When the user clicks on the input field (means focus on input field), the placeholder of that input field floats up with animation. The animation is, each character of the placeholder text floats up one by one with animation (looks like a wave placeholder). See demo for more details.
JavaScript method used:
split()
array.map()
join()
JavaScript loop used:
For loop.
Animated Input Field Placeholder.
File structure:
- Create one folder
- Open it in your code editor.
- Create two files in that folder with name index.html and index.css
I’ve used JavaScript that I've integrated within JavaScript.
Let’s create an animated placeholder for the input field, that floats up with animation on input field focus.
Step 1: Create the basic structure of HTML and create input fields.
First we’ll design the input field using HTML and CSS. Here for placeholder we’ll not use the placeholder attribute in the input field instead of that we’ll place the label tag on the input field as a placeholder.
See below code:
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" required>
<label class="placeholder">Username</label>
</div>
</form>
</div>
</body>
</html> CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #3232d4, #0e023f);
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
background-color: #fff;
padding: 30px;
border-radius: 5px;
}
.input_box {
display: flex;
position: relative;
}
/* Input field */
input {
width: 100%;
border: none;
border-bottom: 2px solid #a2a2a2;
outline: none;
padding: 10px 0px;
font-size: 30px;
}
/* Placeholder styling */
label {
position: absolute;
left: 0px;
top: 12px;
font-size: 30px;
color: #a2a2a2;
pointer-events: none;
}
Output:
So here’s the design ready.
Step 2: Prepare placeholder for animation.
To achieve the animation where each letter of the placeholder floats up one by one,
we'll first need to wrap each letter in a separate HTML tag (we wrap in span tag) using a JavaScript for loop.
Additionally, we'll add inline styling to the span tags which is transition-delay property based on their index value. This assigns a different delay to each span's transition, creating the effect of the letters floating up sequentially (once a top position is applied).
JavaScript
let placeholder = document.querySelector(".placeholder");
// Storing the placeholder text in variable character_array.
let character_array = placeholder.innerHTML;
// Empty the label tag or placeholder initially.
placeholder.innerHTML = "";
for (let i = 0; i < character_array.length; i++) {
const element = character_array[i];
// Storing the text inside the placeholder tag (label tag) with wrapping each of its character inside span tag. Along with different transition delay property for each character (span tag) according to its index value. So the characters gets transition one by one.
placeholder.innerHTML += `<span style="transition-delay:` + i * 50 + "ms" + `">` + element + `</span>`;
}
You can also wrap each characters of placeholder in span tag with array.map() method like this:
JavaScript
placeholder.innerHTML = placeholder.innerHTML.split("").map(wrap_characters).join("");
function wrap_characters(letter, index) {
return `<span style="transition-delay:` + index * 50 + "ms" + `">` + letter + `</span>`;
}
Output:
Before wrapping each letters of placeholder inside span tag. (before javascript).
Now the the label tag looks like this. After wrapping each letters inside span tag using JavaScript.
Now that we’ve added the span tag. So let's style it. We are going to add transition, top: 0px and position: relative; to apply top position.
CSS
/* Styling each character of placeholder. */
label span {
position: relative;
top: 0px;
transition: 0.3s;
}
Now after styling we need to add functionality to float up the characters (span tag) of placeholder (label tag).
So when the input field is focused we float up the span tag (letters of placeholder) by changing its top position. And as with javascript we’ve applied the transition-delay property according to the index value of placeholder (label tag) characters (span tag). The span tag floats up one by one.
Step 3: Add floating functionality to the placeholder.
As I said above, we are going to float up the characters or letters (span tag) of the placeholder one by one on input field focus.
we’ll float up the span tag (that is, letters of placeholder) after detecting the input field state (focused or not) through the focus selector of CSS. According to that state we’ll float the span tags (characters of placeholder) by adjusting their top position.
In the previous step we’ve applied the transition-delay property based on the index value of the placeholder's characters (within span tags). This makes the span tags float up one by one.
And we also add a valid selector that makes characters stay up when the input field has a valid value according to its type.
Along with the input field focus animation or placeholder animation we also change the colour of the input field border on focus.
See below code:
CSS
/* Making border bottom color to blue when input field focus */
input:focus {
border-bottom: 2px solid blue;
}
/* Floating up each character of placeholder (label tag). As each character have different transition delay property (set with javascript), each character floats up individually */
input:focus+label span,
input:valid+label span {
top: -45px;
font-size: 20px;
color: blue;
} As we have applied the transition delay property to span tag through JavaScript the span tag floats up one by one on a focus.
Output:
Final code:
So, that's how you can create an animated input field placeholder using HTML, CSS, and JavaScript. The placeholder characters float up one by one when the user focuses on the input field. Feel free to leave any questions or suggestions in the comments section.
Share your thoughts.