Adding default search text to search box html

javascript html search external

34,476

Solution 1

<input type="text" placeholder="Search" />

Notice that the text doesn't go away until the user enters some text. This way, the user will see the hint for longer.

Solution 2

Try using the HTML placeholder attribute.

<input type="text" name="s" id="search-text" size="15" value="" placeholder="Search" />

But if you still want do it with JavaScript, see the following demo:

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;
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form method="get" action="">
    <input type="text" name="search" id="search" value="" />
    <input type="submit" name="submit" value="Search" />
</form>
 

</body>
</html>

34,476

Author by

Otis Wright

Front end developer, Workflow enthusiast, Recreational fisherman.

Updated on June 25, 2020

Comments

Otis Wright about 4 years
I am working on adding "search" text to a search box. I am trying to achieve:

onfocus: disappear text

And

onblur: reappear text

So far I have achieved this but i have had to hardcode it into html:

eg.
```
<input type="text" name="s" id="search-text" size="15" value="Search"  
onfocus="if (this.value==this.defaultValue)
this.value='';" onblur="if(this.value==''){this.value='Search'}">
```
And if I add this the of my .html file I am getting the same result:

eg.
```
<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>
```
(courtesy: http://zenverse.net/javascript-search-box-show-default-text-on-load/)

What i am trying to achieve is using the above code in an external .js file but no matter what I do i cannot manage to back-link the code to my search box in my .html file.

I am sorry if this is a bad question I have made about 10 different .html and .js files swapping and remapping code and still can't get it to work without having the javascript in the actual .html file.

Any help would be much appreciated Thank You.
Cerbrus over 11 years

W3fools. That site is full of bad examples. Also, I think you might've made a mistake copy/paste-ing. ;-)