Enhance User Experience with a Dynamic Typing Effect in Input Placeholder

User engagement is a key factor in the success of any website. One simple yet effective way to enhance user experience is by adding a dynamic typing effect to input placeholders. This technique captures attention, improves interaction, and makes forms more engaging.

In this blog, we’ll show you how to implement a smooth placeholder animation where text is typed and deleted dynamically inside an input field. This effect is perfect for search bars, e-commerce websites, and interactive applications.

Why Use a Dynamic Placeholder?

A dynamic placeholder serves multiple purposes:

Increases Engagement: Animated text draws attention to the search bar.
Improves UX: Users get subtle suggestions without cluttering the interface.
Enhances Aesthetics: A sleek typing effect gives a modern feel to your website.

Implementing the Placeholder Typing Effect in JavaScript

Let’s dive into the code that brings this effect to life.

HTML Structure

We start with a simple input field in an HTML file:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #searchInput {
        font-family: monospace;
        width: 300px;
        padding: 10px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <input type="text" id="searchInput" placeholder="T-shirt">
    <script src="script.js"></script>
  </body>
</html>

JavaScript Functionality

In the script.js file, we create an array of placeholder texts and use JavaScript intervals to type and delete them dynamically.

const searchInput = document.getElementById("searchInput");
const placeholders = [
  "Sweatshirts",
  "Jeans",
  "Shoes",
  "Jackets"
];
let currentPlaceholderIndex = 0;
let typingInterval;
let deletingInterval;

function typePlaceholder(text) {
  let index = 0;
  searchInput.setAttribute("placeholder", "");
  typingInterval = setInterval(() => {
    searchInput.setAttribute("placeholder", text.substring(0, index + 1));
    index++;
    if (index === text.length) {
      clearInterval(typingInterval);
      setTimeout(() => deletePlaceholder(text), 1000);
    }
  }, 100);
}

function deletePlaceholder(text) {
  let index = text.length;
  deletingInterval = setInterval(() => {
    searchInput.setAttribute("placeholder", text.substring(0, index - 1));
    index--;
    if (index === 0) {
      clearInterval(deletingInterval);
      setTimeout(() => {
        currentPlaceholderIndex = (currentPlaceholderIndex + 1) % placeholders.length;
        typePlaceholder(placeholders[currentPlaceholderIndex]);
      }, 1000);
    }
  }, 100);
}

typePlaceholder(placeholders[currentPlaceholderIndex]);

Explanation of the Code

Define an array – This contains different placeholder texts to cycle through.
Typing function (typePlaceholder) – This function gradually displays each letter of the placeholder text.
Deleting function (deletePlaceholder) – This function removes the placeholder text letter by letter.
Timing control – Delays are added between typing and deleting to create a smooth effect.
Looping effect – Once one text is removed, the next placeholder starts typing automatically.

SEO Benefits of This Feature

Adding dynamic elements to your website improves user interaction and dwell time, which are key SEO ranking factors. This typing effect:

Encourages users to explore search suggestions.
Makes search input visually appealing.
Enhances mobile user experience with interactive elements.

Conclusion

By implementing this simple JavaScript-based typing effect in input placeholders, you can significantly improve user engagement on your website. Whether you’re running an online store, a blog, or a search-heavy website, this feature adds an interactive touch that enhances the user experience.

Try adding this feature to your website today and watch your engagement grow!

Have Questions?

If you have any questions or need help implementing this feature, feel free to drop a comment below!