SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    default text is gone when mouse is put

    Code:
    <form>
    <input type='text' 
              value='This is my text.' 
              style='width:200px'>
    </form>
    When the page is loading with the code above, the input box has the text "This is my text."
    If the user puts his mouse on the box, he or she has to delete the default text for inputting another text.

    I like to make it like the following.

    (1) When the page is loading, the input box has the text "This is my text."

    (2) If the user put his mouse on the input box, the text will be gone, and the input box becomes empty, and it is ready for the user's inputting another text.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's how to do that with inline event handlers. (It's best to avoid using inline event handlers.)
    Code:
    <input type='text' 
              value='This is my text.'
              onfocus='if(this.value=="This is my text.")this.value="";'
              onblur='if(this.value=="")this.value="This is my text.";'
              style='width:200px'>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Code:
    <input type='text' 
              value='This is my text.'
              onfocus='if(this.value=="This is my text.")this.value="";'
              onblur='if(this.value=="")this.value="This is my text.";'
              style='width:200px'>
    Thank you. it works fine.


    Quote Originally Posted by Kravvitz
    It's best to avoid using inline event handlers.
    What's the disadvantage of the inline handlers?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    One disadvantage is that they clutter the markup. Another is that they can't be cached that way.

    For more information on this, read these:
    The Behavior Layer
    Separating behavior and structure
    Behavioral Separation
    Unobtrusive JavaScript
    DOM Scripting - Sample chapter: Best Practices
    Accessible DHTML
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •