39 users online (1 members and 38 guests)  


  Results 1 to 8 of 8

Related

  1. Replies: 0
  2. video disappears after refresh    Forum: HTML Forum
    Replies: 2
  3. Music disappears on .blurbs {display:none;}    Forum: Myspace Forum
    Replies: 1
  4. Replies: 4
  1. #1
    topher's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    4

    Form value disappears

    Hi all,
    Not sure if this is html or not, but how do you make a form text input element that has a value (such as "Search Here") that disappears when the user clicks in the text area?
    thanks for any guidance,
    -topher

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there topher,

    try it like this...
    Code:
    <form action="">
    <input type="text" value="Search Here" onfocus="this.value=''"/>
    </form>
    coothead

  3. #3
    topher's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    4
    Thanks much coothead!

  4. #4
    nick89's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2010
    Posts
    1

    Re: Form value disappears

    What is the best way to insert 2 onfocus comands ex. i want to have onfocus="this.value=''" and onfucus="this.type='password'". I'm trying to make a password field show the word "Password" by default but once you click on the password field it disappears. Just like what you see when you log into facebook

    Thanks

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Form value disappears

    Hi there nick89,

    and a warm welcome to these forums.
    If it had not been for IE6 - ( and maybe IE7 and IE8 also ) - I would have suggested...
    Code:
    
    onfocus="this.value='';this.type='password'"
    ...but nothing is ever straightforward when it comes to coding for those browsers.
    This should work in all browsers...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <script type="text/javascript">
    
    function init(){
    
       obj=document.getElementById('container');
    
       inp1=document.createElement('input');
       inp1.setAttribute('type','text');
       inp1.setAttribute('value','enter password here');
       inp1.setAttribute('id','myinput');
    
       inp2=document.createElement('input');
       inp2.setAttribute('type','password');
       inp2.setAttribute('name','mypassword');
       inp2.setAttribute('id','myinput');
    
       obj.appendChild(inp1);
    
    document.getElementById('myinput').onfocus=function() {
       obj.removeChild(inp1);
       obj.appendChild(inp2);
       setTimeout(function(){document.getElementById('myinput').focus()},0);
       return;
      }
     }
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    
    </script>
    
    </head>
    <body>
    
    <form action="">
    <div id="container"></div>
    </form>
    
    </body>
    </html>
    

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Form value disappears

    Hi there nick89,

    here is an alternative solution that may suit your requirement.
    It uses a input type="password" with a background text image and simply removes it onfocus.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    .text {
        background-image:url(http://i45.tinypic.com/2hqgiyp.gif);
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
    document.getElementById('myinput').onfocus=function() {
       this.className='';
      }
     }
    
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    
    </script>
    
    </head>
    <body>
    
    <form action="">
    <div>
    <input id="myinput" class="text" name="password" type="password" ></div>
    </form>
    
    </body>
    </html>
    
    This is the image used...
    ...but, obviously, make your own to suit your needs.
    Last edited by coothead; 02-18-2010 at 01:47 PM.

  7. #7
    marshrobin1's Avatar
    Disabled

    Status
    Offline
    Join Date
    Jul 2010
    Location
    west virginia, USA
    Posts
    1

    Smile good one

    hi dud!.......thanks for the post..........

  8. #8
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Form value disappears

    I am pleased that you liked it.



Tags for this Thread