SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cancer10 View Post
    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 ... ?

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    739
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Perhaps I have found a solution: http://jsbin.com/eguluv/3/edit

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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');
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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>

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yeah placeholder is the best


Bookmarks

Posting Permissions

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