Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts

    Question Showing/Hiding text in search bar

    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
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by devnull69 View Post
    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?

  • #4
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    Perhaps I have found a solution: http://jsbin.com/eguluv/3/edit

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Examples:-


    Code:
    <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: ';" />
    Code:
    <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
    Last edited by Philip M; 01-19-2013 at 07:53 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •