Very often we want our search box to show a default text such as “Search…” when it is loaded. Then when users clicked on the search box, the word is cleared, allowing user to enter their search query. We will see how to do that in this short guide in both plain Javascript and jQuery.
You can use the jQuery method if your website is already using jQuery library. If not, it is not recommended because there is no need to load a library just for this simple script.
Demo Page
Click here to go to the DEMO PAGE
Using Plain Javascript
Below shows the codes to achieve the behavior in a simple search form using plain javascript.
<html>
<head>
</head>
<body>
<form method="get" action="">
<input type="text" name="search" id="search" value="" />
<input type="submit" name="submit" value="Search" />
</form>
<script type="text/javascript">
<!--
var defaultText = "Search...";
var searchBox = document.getElementById("search");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function() {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
//on blur behaviour
searchBox.onblur = function() {
if (this.value == "") {//restore default text
this.value = defaultText;
}
}
//-->
</script>
</body>
</html> |
It is pretty straightforward, we just need to set the default text, the onfocus & onblur behaviors to the search form’s text <input> element.
But make sure you placed the javascript codes AFTER the search form or else you will get an error complaining that the element doesn’t exist.
Using JQuery
Below shows the codes for jQuery, where the jQuery library is loaded from Google API. You can also use your local copy of jquery.js if you want.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
var defaultText = "Search...";
var searchBox = $('#search2');
//set default text on load
searchBox.val(defaultText);
//on focus behaviour
searchBox.focus(function(){
if ($(this).val() == defaultText) {//clear text field
$(this).val('');
}
});
//on blur behaviour
searchBox.blur(function(){
if ($(this).val() == "") {//restore default text
$(this).val(defaultText);
}
});
});
//-->
</script>
</head>
<body>
<form method="get" action="">
<input type="text" name="search2" id="search2" value="" />
<input type="submit" name="submit" value="Search" />
</form>
</body>
</html> |
Similar codes go for jQuery but with different syntax. Also, for jQuery, you can put the javascript anywhere (it does not matter before or after the form)
Hope this short guide helps. Please Share or Like it if it does :)
