Dynamic Typing Animation
Level up your forms with a smooth typing placeholder effect using pure Vanilla JavaScript. No heavy libraries, just clean code by Mohd Rihan.
🚀 Interactive Preview
Experience the "Typing" feel in real-time.
💻 Get the Source Code
INDEX.HTML
<!-- FAMOUSCODE.DEV -->
<input id="type-input" placeholder="|">
<script>
const target = document.getElementById('type-input');
const hints = ['Enter Full Name', 'Enter @Instagram', 'Enter Email ID'];
let wordIndex = 0, charIndex = 0, isWaiting = false;
setInterval(() => {
if (isWaiting) return;
target.placeholder = hints[wordIndex].slice(0, ++charIndex) + '|';
if (charIndex > hints[wordIndex].length) {
isWaiting = true;
setTimeout(() => {
charIndex = 0;
wordIndex = (wordIndex + 1) % hints.length;
isWaiting = false;
}, 1500);
}
}, 150);
</script>How it works?
1. We use setInterval to update the placeholder text at 150ms intervals.
2. The .slice() method extracts substrings to simulate character-by-character typing.
3. A setTimeout function creates a pause once a sentence is completed, improving readability.