How to add default search text to search box in HTML with JavaScript ?

Last Updated : 01 Feb, 2022

We can add a default search text to the search box by using the JavaScript DOM getElementById() method and the onfocus & onblur events.

getElementById(): The DOM getElementById() method is used to return values to the unique id of the input tag used in HTML. It is one of the most widely used DOM HTML methods when we want to manipulate and get information from your document. Suppose if there exists more than one element having the same id then it will return to the first element in the code. If the id specified does not exist in the code then it will return null.
Syntax:
```
document.getElementById('element_id');
```
onfocus event: The onfocus event is mostly used with the input, select, and anchor tags, whenever the user clicks on the input tags the onfocus event comes into play. It is mostly used along with the onblur event.
Syntax:
```
<element onfocus = "script">
```
onblur event: The onblur event is used along with the onfocus event. It comes into play when the element loses focus, it is also used with the input, select, and anchor tags.
Syntax:
```
<element onblur = "script">
```

Here we have used two examples to add default text to a search box, the first example uses the onfocus and onblur events and the second example uses the onfocus and onblur events along with the placeholder attribute.

Example 1: In the code below, we have used the onfocus and onblur event attributes of JavaScript to add a default value to the search box in HTML.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Search box with default text</title> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <p>Search word in HTML using JavaScript</p> 
    <form> 
        <input type='text' name='Search' id='Search' /> 
        <input type='submit' name='submit' value='Search' /> 
    </form> 
    <script> 
        // Text to be displayed on search box by default 
        const defaultTextValue = 'Search...'; 
  
        // Here input id should match with the  
        // parameter of getElementById 
        let searchBox = document.getElementById('Search'); 
  
  
        // Default text to be displayed 
        searchBox.value = defaultTextValue; 
  
  
        // Search box on focus  
        searchBox.onfocus = function () { 
            if (this.value == defaultTextValue) { 
                // Clears the search box 
                this.value = ''; 
            } 
        } 
  
        // Search box when clicked outside 
        searchBox.onblur = function () { 
            if (this.value == '') { 
                // Restores the search box with default value 
                this.value = defaultTextValue; 
            } 
        } 
    </script> 
</body> 
  
</html>

Output:

Search box

Example 2: When you click on the search box the placeholder will display the “Search…” text using the onfocus and onblur events of JavaScript we can add default search text.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Search box with default text</title> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <p>Search word in HTML using JavaScript</p> 
  
    <form> 
        <input type='text' name='Search' 
               id='Search' placeholder='Search...' /> 
        <input type="submit" name='submit' value='Search' /> 
    </form> 
    <script> 
        // Text to be displayed on search box by default 
        const defaultTextValue = 'Geek'; 
  
        // Here input id should match with the 
        //parameter of getElementById 
        let searchBox = document.getElementById('Search'); 
  
  
        // Default text to be displayed 
        searchBox.value = defaultTextValue; 
  
  
        // Search box on focus  
        searchBox.onfocus = function () { 
            if (this.value == defaultTextValue) { 
                // Clears the search box 
                this.value = ''; 
            } 
        } 
  
        // Search box when clicked outside 
        searchBox.onblur = function () { 
            if (this.value == '') { 
                // Restores the search box with default value 
                this.value = defaultTextValue; 
            } 
        } 
    </script> 
</body> 
  
</html>