SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clear contents of input box onfocus

    Hi,

    I'm trying to clear the contents of an input box onfocus, but without any inline javascript whatsoever. Is this possible? So far I have the following:

    main.js:
    Code:
    window.onload = function() {
    	clearInput('username');
    }
    
    
    function clearInput(inputName) {
    	if (document.getElementById(inputName).value) == inputName {
    		document.getElementById(inputName).value = '';
    	}
    }
    index.htm:
    Code:
    <html>
    <head>
    <script type="text/JavaScript" src="main.js"></script>
    </head>
    <body>
    <form>
    <input type="text" name="username" value="username">
    <input type="text" name="password" value="password">
    </form>
    </body>
    </html>

    Obviously this doesn't work because it just sets the value of the username text input to '' when the page loads. I need it only to do this once the user focuses the input box.

    I guess what I'm asking is can an external javascript recognise when an element is focused without adding an "onfocus" behaviour to the HTML element? If so, how?

    Thanks guys...

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope I understood you correctly: You want to clear textbox onfocus?

    Code:
    <form name="myform" action="">
    <input type="text" name="username" value="username" onfocus="document.myform.username.value = '';">
    <input type="text" name="password" value="password" onfocus="document.myform.password.value = '';">
    </form>

  3. #3
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bosko View Post
    Hope I understood you correctly: You want to clear textbox onfocus?
    Yes, but you missed the part where I said "but without any inline javascript whatsoever".

    Your solution relies entirely on inline javascript. I want to separate all of my javascript out into and external file and operate this via DOM. Thanks anyhow.

  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)
    Here's the way I do it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script type="text/javascript"><!--
    function isEmpty(s){return ((s=='')||/^\s*$/.test(s));}
    function clearText(fld){
      if(fld.value==fld.defaultValue) fld.value = '';
    }
    function restoreText(fld){
      if(isEmpty(fld.value)) fld.value = fld.defaultValue;
    }
    window.onload = function(){
      if(!document.forms['form1'] || !document.forms['form1'].demoField) return;
      var t = document.forms['form1'].demoField;
      t.onfocus = function(){
        if(this.value=='Demo Field') clearText(this);
      }
      t.onblur = function(){restoreText(this)}
    }
    // -->
    </script>
    </head>
    <body>
    
    <form id="form1" action="#"><div>
    <input type="text" name="demoField" value="Demo Field">
    </div></form>
    
    </body>
    </html>
    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.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's much more like it, thanks Kravvitz. I know there would be a neater way to trigger the function for both of my input fields - other than duplicating the function - but I've spent too long on this already this afternoon!

    Thanks again.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, the onfocus and onblur events don't bubble like most events, e.g. onclick, do. Therefore, you have to attach the handlers for them to each form control that you want to be affected by them.

    Here's a slight variation. (I should also mention that on a real page, I would probably attach the events using something similar to Dean Edwards' event manipulation functions, which I recommend.)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script type="text/javascript"><!--
    function isEmpty(s){return ((s=='')||/^\s*$/.test(s));}
    function clearText(fld){
      if(fld.value==fld.defaultValue) fld.value = '';
    }
    function restoreText(e){
      var fld=this;
      if(!fld.value || !fld.defaultValue) {
        // This is so we can use the "advanced" event models to attach this as an 
        // event handler should we ever want to.
        e=e||window.event;
        fld=e.target||e.srcElement;
      }
      if(isEmpty(fld.value)) fld.value = fld.defaultValue;
    }
    window.onload = function(){
      if(!document.forms['form1']) return;
      var t = document.forms['form1'].demoField;
      if(t) {
        t.onfocus = function(){
          if(this.value=='Demo Field') clearText(this);
        }
        t.onblur = restoreText;
      }
      t = document.forms['form1'].demoField2;
      if(t) {
        t.onfocus = function(){
          if(this.value=='Demo Field 2') clearText(this);
        }
        t.onblur = restoreText;
      }
    }
    // -->
    </script>
    </head>
    <body>
    
    <form id="form1" action="#"><div>
    <input type="text" name="demoField" value="Demo Field">
    <input type="text" name="demoField2" value="Demo Field 2">
    </div></form>
    
    </body>
    </html>
    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
  •