Showing/Hiding text in search bar

JavaScript
1

HI

You know the search bar on websites that shows some default text like “Search” and when you click on it the text disappears.

Whats the best approach to do it?

Like hard code the “search” value for example:

var val = document.getElementById(‘txtsearch’).value;
if(val == “Search”){
//code to empty the text box
}

If yes then how do you manage when you have to work on a multi-lingual website ? You cannot hard code the value for each lang. Whats the best approach in your opinion?

THanks for your inputs.

2

That method looks OK. There is a thread here with some fuller code:

If you have to change the text based on the language, perhaps you could first detect the lang attribute on the <html> tag, and, based on that, serve up default text to suit.

3

I could not find an appropriate one, can u point out the post # you are precisely referring to?

4

Post #11 has the full code for the text input. You just need to work out how to set a different default value for each language. I’m not much of a programmer, but I would probably do it with PHP. I guess the first question I’d have for you is—How does your site work now? Do you have separate pages for different languages? If so, do you use the lang= attribute on each page? If so, how is that set up? Manually, or … ?

5

Perhaps I have found a solution: http://jsbin.com/eguluv/3/edit

6

This is really very simple to do:

var fld = document.getElementById('txtsearch');
fld.onfocus = function() {if (fld.value === fld.defaultValue) fld.value = '';};

That will clear the default text from the <input id=“txtsearch” … > field when your visitor accesses the field to start entering something.

If you want to put the original value back if they exit the field without typing anything you would add one extra line:

fld.onblur = function() {if (fld.value === '') fld.value = fld.defaultValue;};

You can change the value in the input tag itself to change the default value without needing to change the script at all. Similarly you can apply the same code to other fields just by changing the value of the id.

To make it easy to apply to as many fields as you like you can make it a function and pass the id of the field to add the code to:

var hideDef = function(id) {"use strict";
var fld = document.getElementById(id);
fld.onfocus = function() {if (fld.value === fld.defaultValue) fld.value = '';};
fld.onblur = function() {if (fld.value === '') fld.value = fld.defaultValue;};
};

hideDef('txtsearch');
hideDef('anotherid');
7

Here are all your options http://www.visibilityinherit.com/code/clear-input-value.php

8

Another nice solution is to use the new placeholder attribute in HTML (which is supported by the latest browsers). That would also make it much more straightforward to switch the placeholder text depending on the language of the page (using a PHP condition or something).

<!DOCTYPE html>
<html lang="[COLOR="#FF0000"]en[/COLOR]">
<head>
<meta charset="utf-8">
<title>placeholder</title>
</head>
<body>
	<form method="get" action="">
		<label for="q">Search this Site</label> 
		<input type="text" name="q" id="q" value="" placeholder="[COLOR="#FF0000"]Search[/COLOR]"> 
		<input class="submit" type="submit" value="Search">
	</form>
</div>
</body>
</html>
9

Yeah placeholder is the best