SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Basic JavaScript Question...

    Hello everyone,

    I have little to no JavaScript experience, but if someone could help me achieve a small function, I'd appreciate it.

    I have a HTML form with a textfield. The textfield has a value of "Search"

    I would this value to disappear on the click of the textfield, making it empty and read for the user to begin typing. Upon clicking elsewhere, I'd like text to return if they did not enter a value.

    Also, I need this text to be colored differently then the text the user types, to give it the "grayed out" or "inactive" appearance.

    Any help would be appreciated. Thank you all in advance.

    Kind regards,
    Alex Stanford
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    I usually use the one by 456 Berea Street

    Hope it helps.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Let's start with what we want someone to see should there be no javascript.

    Code javascript:
    <form id="search" method="get" action="search.php">
    <input type="text" name="search">
    <input type="submit" name="submit" value="Search">
    </form>

    The name attribute lets us pass the search parameter, while the id attribute on the form provides a top-level manner for us to easily target it from javascript.

    We want the script to populate the field with the default value and to grey it out. When the field gains focus we want to clear it if the default value is still there.

    So first up, some css to provide that faded look to the text, and a consistent way to hide page elements, like the search button.

    Code css:
    .faded {
        color: #aaa;
    }
    .hidden {
        display: none;
    }

    Colors range from #000 to #fff. It possible to use word names for colors but some web browsers have trouble with those. I could have used the full syntax, for example #a9ed86 but the shorthand #ae8 (which is equivalent to #aaee88) provides a close enough match for development, or in our case #aaa for #aaaaaa (light grey).

    Now to start things off by populating the field and setting its color, and we might as well hide the search button as well.

    For ease of use and improvements in page loading speed, the scripts should be placed at the bottom of the page, just before </body>

    Code javascript:
    function defaultSearchText(el) {
        el.value = 'Search';
        el.className = 'faded';
    }
    var menu = document.getElementById('search');
    searchField = menu.elements['search'];
    defaultSearchText(searchField);
    menu['submit'].style.display = 'none';

    When the search field is in focus, we want to clear the text, and when it's blurred we want to go back to the default text.

    Code javascript:
    function clearSearchText(el) {
    	el.value = '';
    	el.className = '';
    }
    searchField.onfocus = function () {
        ...
    }
    searchField.onblur = function () {
        ...
    }

    We do need to perform some checks though. When the onblur event occurs, we want it to go back to the default text if the field is left empty.

    Code javascript:
    searchField.onblur = function () {
    	if (this.value === '') {
    		defaultSearchText(this);
    	}
    }

    When you click in the search box, we want it to clear only if the default text is still in the search box. Some people check to see if the search text is still there, but we're going to do something slightly different.

    We're going to check if the faded style is still applied to it. If it is then we know that the field needs to be cleared. Now people will also be able to search for the word "Search" if they so desire.

    Code javascript:
    searchField.onfocus = function () {
    	if (this.className === 'faded') {
    		clearSearchText(this);
    	}
    }

    And finally we're going to place the script inside an anonymous self-invoking function so that none of the code will interfere with anything else running on the page.

    Code javascript:
    (function () {
        ...
    })();

    In summary, here the full code. If for some reason you want the script in the head section, you'll need to use your own methods to run the script after the page has finished loading.

    Code css:
    .faded {
    	color: #aaa;
    }
    .hidden {
    	display: none;
    }

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Auto-populated Search test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <form id="search" method="get" action="search.php">
    <input type="text" name="search">
    <input type="submit" name="submit" value="Search">
    </form>
    <script src="js/populateSearch.js">
    </script>
    </body>
    </html>

    Code javascript:
    (function () {
    	function defaultSearchText(el) {
    	    el.value = 'Search';
    	    el.className = 'faded';
    	}
    	function clearSearchText(el) {
    		el.value = '';
    		el.className = '';
    	}
    	var menu = document.getElementById('search');
    	searchField = menu.elements['search'];
    	defaultSearchText(searchField);
    	menu['submit'].style.display = 'none';
    	// attach events
    	searchField.onfocus = function () {
    		if (this.className === 'faded') {
    			clearSearchText(this);
    		}
    	}
    	searchField.onblur = function () {
    		if (this.value === '') {
    			defaultSearchText(this);
    		}
    	}
    })();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •