javascript - Adding default search text to search box html

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: /)

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.

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.

Any help would be much appreciated Thank You.

Share Improve this question edited Dec 28, 2012 at 12:12 Bhavin 27.2k11 gold badges56 silver badges95 bronze badges asked Dec 28, 2012 at 12:04 Otis Wright 2,1108 gold badges32 silver badges53 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 14

Use the HTML5 placeholder attribute:

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

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>

Might be useful to take a look at jQuery Placeholder for placeholder support in older browsers.

Use below script it is working fine.

<script type="text/javascript">
 var defaultText = "Sitede ara…";
 var searchBox = document.getElementById("ctl00_ctl34_S52EF3DAB_InputKeywords");

 //default text after load
 searchBox.value = defaultText;

 //on focus behaviour
 searchBox.onfocus = function () {
     if (this.value == defaultText) {//clear text field
         this.value = '';
     }
 }

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Adding default search text to search box html - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)