SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove the text in a form

    Hey
    I'd like to get the "Search ..." removed from this form when a users clicks it to type something, and make it appear again when he clicks outside the box.
    Does someone know the code for this ?
    Thanks!
    HTML Code:
    <form name="form_search" method="post" action="<?=$base_url;?>index.php">Search:
    <input name="q" type="text" id="q" size="20" class="cp_input" value="Search ...">
    <input type="image" src="<?=$base_url;?>templates/images/button-search.gif" name="Submit" value="Search">
    </form>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This would go in your <head>:
    Code:
    window.onload = function() {
      var q = document.getElementById('q');
      q.onfocus = function() {
        this.value = '';
      }
      q.onblur = function() {
        this.value = 'Search...';
      }
    }
    And you should put the Search: text inside a <label> element. This means people can click on it and give the form element it refers to focus. Usage:
    Code:
    <label>Search<input type="whatever" /></label>
    Not understood by IE6. More cross-browser is this:
    Code:
    <label for="q">Search</label>
    <input type="whatever" id="q" />

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works for a big part, only, when the page is loaded, the "search ..." isn't there, it is shown, wen i click in the filed, and the click outside the field ...
    Know how to fix this ?
    Thanks alot!

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Did you keep the value="Search..." bit in the input tag or did you remove it?

  5. #5
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed it ...
    i palced it back, it works now ... thanks man

  6. #6
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    q.onblur = function() {
        this.value = 'Search...';
    }
    This will remove the query string that user already entered.
    Watisfy - Weight Control Made Easy
    Ruby on rails and Ajax
    http://www.watisfy.com/
    Quanjumps Team, HM, NZ.

  7. #7
    ¬.¬ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <form id="searchForm">
        <label>Search:</label>
        <input id="searchQuery">
    </form>
    Code:
    // I can do better but I really don't care at the moment not my site.
    
    // Run onload or whatever...
    function clearInput() {
        var parentElm = document.getElementById('searchForm');
        var labelElm  = parentElm.getElementByTag('label')[0];
        var inputElm  = document.getElementById('searchQuery');
    
        var defaultText = labelElm.innerHTML.replace(':', '...');
    
        if (inputElm.value == defaultText || inputElm.value == '') {
            inputElm.value = defaultText;
        }
    
        // This is DOM 0 stuff...yucky...
        inputElm.onfocus = function() {
            // Would actually remove all whitespace and
            // convert to all upper/lowercase first but...
            // I'm lazy right now.
            if (this.value == defaultText || this.value == '') {
                this.value = '';
            }
        };
    
        inputElm.onblur = function() {
            // Would actually remove all whitespace and
            // convert to all upper/lowercase first but...
            // I'm lazy right now
            if (this.value == defaultText || this.value == '') {
                this.value = defaultText;
            }
        };
    }
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this http://xy.wz.cz/example2/ it should works well in any form


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
  •