<!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
>