Hey Francis, let's tackle your two search input questions one by one—these are super common frontend patterns, so I've got straightforward solutions for you!

This is often called a "persistent placeholder" (different from the native placeholder attribute, which disappears when you type). Here's a simple vanilla JS implementation that gives you full control:

HTML #

<input type="text" id="searchInput" value="Enter your search query..." style="color: #999;" />

JavaScript #

// Get the input element and store its default state
const searchInput = document.getElementById('searchInput');
const defaultText = searchInput.value;
const defaultColor = searchInput.style.color;

// Listen for when the input gets focus
searchInput.addEventListener('focus', () => {
  // Only clear if the input still has the default text
  if (searchInput.value === defaultText) {
    searchInput.value = '';
    searchInput.style.color = '#000'; // Switch to black text when active
  }
});

// Listen for when the input loses focus
searchInput.addEventListener('blur', () => {
  // Only restore if the user didn't type anything
  if (searchInput.value.trim() === '') {
    searchInput.value = defaultText;
    searchInput.style.color = defaultColor; // Revert to original gray
  }
});

How it works: #

• We first save the input's initial text and color so we can reference them later
• On focus: If the input still has the default placeholder text, we clear it and switch to black text for active typing
• On blur: If the input is empty (after trimming whitespace), we put the default text and gray color back

Since you already have code that clears the text and sets black on click, we just need to add the blur event handler to handle the "reset" case. Let's adapt your existing code:

Assuming your current code looks something like this: #

// Your existing focus logic
const searchBox = document.querySelector('#searchBox');
const defaultSearchText = 'Search'; // Your target default text

// Existing focus handler (you might already have this)
searchBox.addEventListener('focus', () => {
  if (searchBox.value === defaultSearchText) {
    searchBox.value = '';
    searchBox.style.color = '#000';
  }
});

Add this blur handler to complete the functionality: #

// New blur handler to restore default state
searchBox.addEventListener('blur', () => {
  // Check if the input is empty (user didn't type anything)
  if (searchBox.value.trim() === '') {
    searchBox.value = defaultSearchText;
    searchBox.style.color = '#999'; // Set back to gray
  }
});

Key notes: #

• We use trim() to handle cases where the user just typed spaces (we still want to reset to "Search" in that case)
• If the user entered actual search text, we leave it as-is with black text—only reset when the input is truly empty
• Make sure defaultSearchText matches the initial value of your input in the HTML

内容的提问来源于stack exchange，提问作者Francis Bongoyan