SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Making Input Box Text Transparent when Input Box is Inactive

    Hello everyone,

    I have seen many times with input boxes where the text is somewhat transparent when the user is not inputting anything into the box, and the text becomes obscure (not transparent) again as the user activates the box to input information- in this case, it is the e-mail address.

    In my HTML markup, my form looks like this:
    Code:
    <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)"/>
              <input type="submit" value="Join" />
    I have a small JS script file attached to this file. It removes the value when active and restores the original value - "your e-mail" into the input box. It is this:
    Code:
    function input_focus(obj){
    	if ( obj.value == obj.defaultValue ){
    		obj.value = ""
    	}
    }
    
    function input_reset(obj){
    	obj.value = obj.defaultValue;
    }
    What can I add to this script in order to do what I discussed at the opening of this thread.
    I hope my question was made clear and concise. Thank you for your help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by etidd View Post
    I have seen many times with input boxes where the text is somewhat transparent when the user is not inputting anything into the box
    That sounds like it's a very bad idea, because we have learned that partly transparent form fields are disabled, and can only be enabled by doing something else. A prime example is option radios to subscribe to a newsletter, and only when subscribe is selected, does the email field stop being partly transparent so that you can then enter your information in there.

    So when a field is seen as being partly transparent, or faded, people won't even try to interact with it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    may be the placeholedr attribute can help
    http://davidwalsh.name/html5-placeholder

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    ,input {
      color:gray;
    }
    
    /*]]>*/
    </style>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function input(obj,color){
     obj.style.color=color;
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <input class="input" type="text" name="go" id="go" value="your e-mail" onfocus="input(this,'black')"  onblur="input(this,'gray')"/>
    
    </body>
    
    </html>

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What are these two things?

    Code:
    /*<![CDATA[*/
    /*]]>*/
    I have been trying to find out.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by etidd View Post
    What are these two things?

    Code:
    /*<=!=[=C=D=A=T=A=[*/
    /*]=]=>*/
    I have been trying to find out.
    Those are to prevent the script from being interpreted as XML content, when an XHTML page is being interpreted as XML.
    Due to web browsers such as Internet Explorer having no ability to work with XHTML code, so virtually all of the XHTML code on the web use a mutated version of XHTML which uses HTML compatibility guidelines that are designed to allow the XHTML code to be interpreted as if it were HTML code instead. As a result, we've remained with using HTML 4 and HTML 5 for the HTML code instead.

    Also, you shouldn't have scripting within your web page. When you put your scripting in a script file and use that instead, there is no need for that CDATA technique either.

    So for me, CDATA is a code smell that indicates that several improvements need to be made.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •