jQuery Add Default Text To Search Input Box

Enhance your search box with jQuery: a simple yet effective guide! This tutorial demonstrates how to add default text to your search box, making it more user-friendly. The solution ensures the default text disappears on click, reappears when the box is empty, and provides visual feedback on hover.

See Live Demo

Here's the JavaScript code:

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

This jQuery code uses the blur event to check if the search box is empty after the user interacts with it. If empty, it sets the default text.

The HTML structure (not shown in detail) should simply contain a form with an input field having the ID "search".

The CSS styling below provides the visual enhancements:

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

This CSS controls the opacity on hover, removes default form styling, and sets dimensions and styles for the input field and the search button.

Frequently Asked Questions (FAQs) about Adding Default Text to Search Input

This section addresses common questions regarding adding default text to a search input field, covering both HTML and CSS approaches. The original FAQ section is retained, but rephrased for clarity and conciseness. Specific code examples are included where beneficial.

HTML Placeholder Attribute

Use the HTML placeholder attribute for a simple way to add default text. For example: <input type="search" placeholder="Enter search term...">. The placeholder text will disappear as the user types.

Styling Placeholder Text with CSS

Control the placeholder text's color using CSS:

input::placeholder {
  color: red;
}

This example sets the placeholder text to red. Remember that browser support for ::placeholder varies; you may need vendor prefixes for older browsers.

JavaScript for Default Text

While the placeholder attribute is often sufficient, you can use JavaScript to manage default text dynamically. The provided jQuery example above is one such method.

Adding an Icon

Use CSS's background-image and background-position properties to add an icon within the search box.

Expanding Search Box on Focus

Use the :focus pseudo-class in CSS to expand the search box when it gains focus:

input[type="search"]:focus {
  width: 200px;
}

Clear Button Styling

Styling the built-in clear button requires browser-specific CSS due to differing pseudo-elements. For WebKit browsers (Chrome, Safari), you might use:

input[type="search"]::-webkit-search-clear-button {
  color: red;
}

Form Submission on Enter Key

Ensure the search box is within a <form></form> element to automatically submit the form when the Enter key is pressed.

Autofocus on Page Load

Use the autofocus attribute on the <input> element to automatically focus the search box when the page loads: <input type="search" autofocus>.

The above is the detailed content of jQuery Add Default Text To Search Input Box. For more information, please follow other related articles on the PHP Chinese website!