Shopify Custom Hub | EasyWidget Hub

Enhancing user experience in web forms is crucial, and implementing a clear button within input fields allows users to quickly clear their entries. In Bootstrap 5, this can be achieved using a combination of HTML, CSS, and JavaScript.

Implementation Steps:

HTML Structure: Create a container with a position-relative class to hold the input field and the clear button
- The pe-5 class adds padding to the end (right side) of the input to accommodate the button.
- The button is initially hidden using the d-none class.
- The position-absolute, top-50, end-0, and translate-middle-y classes position the button inside the input field.

<div class="position-relative">
  <input type="text" class="form-control pe-5" id="inputField" placeholder="Enter text">
  <button class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y d-none" type="button" id="clearButton" aria-label="Clear input">
    <i class="bi bi-x-circle"></i>
  </button>
</div>

CSS Styling: Ensure the clear button appears appropriately within the input field.

.clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

JavaScript Functionality: Add interactivity to show the clear button when there's input and to clear the input when the button is clicked.
- The clear button becomes visible when the input field contains text.
- Clicking the clear button empties the input field, hides the button, and refocuses on the input field.

document.addEventListener('DOMContentLoaded', function () {
  const inputField = document.getElementById("inputField");
  const clearButton = document.getElementById("clearButton");

  inputField.addEventListener("input", function () {
    clearButton.classList.toggle("d-none", inputField.value === "");
  });

  clearButton.addEventListener("click", function () {
    inputField.value = "";
    clearButton.classList.add("d-none");
    inputField.focus();
  });
});

Complete Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Input Field with Clear Button</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    .clear-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: none;
      cursor: pointer;
      display: none;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h3>Bootstrap 5 Input Field with Clear Button</h3>
    <div class="position-relative mt-3">
      <input type="text" class="form-control pe-5" id="inputField" placeholder="Enter text">
      <button class="clear-btn" id="clearButton" aria-label="Clear input">
        <i class="bi bi-x-circle"></i>
      </button>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const inputField = document.getElementById("inputField");
      const clearButton = document.getElementById("clearButton");

      inputField.addEventListener("input", function () {
        clearButton.style.display = inputField.value ? 'block' : 'none';
      });

      clearButton.addEventListener("click", function () {
        inputField.value = "";
        clearButton.style.display = 'none';
        inputField.focus();
      });
    });
  </script>
</body>
</html>

By following this approach, you can create an input field with a clear button in Bootstrap 5 that enhances user experience and adheres to SEO best practices.

For any issues or customization needs, feel free to reach out to us at 📧 tentech.ai.2023@gmail.com.

Bootstrap 5 Input Field with Clear Button Implementation

评论