Showing/Hiding text in search bar

**cancer10** · Jan 17, 2013 23:02

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

**ralph.m** · Jan 17, 2013 23:40

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

http://www.sitepoint.com/forums/show...It-s-Activated

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.

**cancer10** · Jan 18, 2013 02:06

Originally Posted by ralph.m

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

http://www.sitepoint.com/forums/show...It-s-Activated

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.

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

**ralph.m** · Jan 18, 2013 02:31

Originally Posted by cancer10

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

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

**cancer10** · Jan 19, 2013 00:07

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

**felgall** · Jan 19, 2013 02:42

This is really very simple to do:

Code:

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:

Code:

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:

Code:

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');

**PicnicTutorials** · Jan 19, 2013 08:19

Here are all your options http://www.visibilityinherit.com/cod...nput-value.php

**ralph.m** · Jan 19, 2013 16:11

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

Code:

<!DOCTYPE html>
<html lang="en">
<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="Search"> 
		<input class="submit" type="submit" value="Search">
	</form>
</div>
</body>
</html>

**PicnicTutorials** · Jan 19, 2013 19:20

Yeah placeholder is the best

User Tag List

Thread: Showing/Hiding text in search bar

Thread Tools

Display

Showing/Hiding text in search bar

Bookmarks

Bookmarks

Posting Permissions