Showing/Hiding text in search bar

[cancer10]

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.

[devnull69]

This is called a "placeholder" value and modern browsers support it already, so you won't have to do anything about it.

In order to fill in the default value, internationalized pages use "i18n" (=internationalization) techniques to grab language dependent values. So they are in fact not hardcoded values ... they will be dynamically created server-side so in the browser it seems to be hardcoded.

[cancer10]

Originally Posted by devnull69

This is called a "placeholder" value and modern browsers support it already, so you won't have to do anything about it.

In order to fill in the default value, internationalized pages use "i18n" (=internationalization) techniques to grab language dependent values. So they are in fact not hardcoded values ... they will be dynamically created server-side so in the browser it seems to be hardcoded.

Where can i find the code for it?

[cancer10]

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

[Philip M]

Examples:-

<input type = "text" name = "uname" id = "uname" value = "Name: "  onclick = "if (this.value == 'Name: ') this.value = '';"  onblur = "if (this.value == '') this.value = 'Name: ';" />
<br>

<input type = "text" name = "email" id = "email" value = "Email: "  onclick = "if (this.value == 'Email: ') this.value = '';"  onblur = "if (this.value == '') this.value = 'Email: ';" />

<input type = "text" name = "uname" id = "uname" size = "40" value = "Enter user name here:-"; style=color:'#848484'; 
onclick = "if (this.value == 'Enter user name here:-') {this.value = '';this.style.color='#000000'}"
onblur = "if (this.value == '') {this.value = 'Enter user name here:-';this.style.color='#848484'}" />

A couple of errors cost us two goals and that was all that was good about the game. - Football team coach