Default Value for Input Text

This is a Javascript that will erase and replace a string of default text for an input element on a web form when the users clicks into or out of a field. I have probably written forms of this script about a thousand times in about a thousand different ways, however this is one of more elegant ways I have done it and I wanted to record it here. You can see a working version of this script by clicking here.

<script type="text/javascript">

/**
 * Maintains a default value for any number of input elements in a form.
 *
 * More details at http://www.finefrog.com/2007/10/07/default-value-for-input-text/
 *
 * @author Jordon Mears <jordoncm at gmail dot com>
 *
 * @param object element Reference to the input element.
 * @param string status Whether it was called onfocus or onblur.
 * @param string text The default text.
 */
function default_text(element, status, text) {
    switch(status) {
        case 'focus':
            if(element.value == text) {
                element.value = '';
            }
            break;
        case 'blur':
            if(element.value == '') {
                element.value = text;
            }
            break;
    }
}

</script>

<form action="" method="post">
<input type="text" value="default text"
onfocus="default_text(this, 'focus', 'default text');"
onblur="default_text(this, 'blur', 'default text');" />
</form>

Anyone is welcome to use this script, all I ask is for you to maintain the credits (and maybe leave me a comment).

Sun 2007.10.07 [ Javascript ] no comments...

Faking css position: fixed in Internet Explorer 6

This is a trick that I have been doing for some time, but now that Internet Explorer 7 is out and it supports position fixed in css; I think this trick will been even more useful now that it will allow web developers to take better advantage of css and at the same time not leave out the Internet Explorer 6 user base. I am posting this here because I sent this to a friend a couple days ago and thought others might be able to use it as well.

The trick is really quite basic. For simplicity I am just putting this example inline, but you can put it where you want.

First your declare your intended style for IE7 (and basically every other browser):

<style type="text/css">
  #fixed_div {
    position: fixed;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
    /* add additional styling, etc. */
  }
</style>

Second add in your Javascript function which is going to be doing your movement for IE6:

<script type="text/javascript">
function move_box() {
    var offset = 0; // set offset (likely equal to your css top)
    var element = document.getElementById('fixed_div');

    element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}
</script>

Then declare the element itself:

<div id="fixed_div">I am fixed, even in IE6</div>

Lastly, implement your fix for IE6 only:

<!--[if lt IE 7]>
<style type="text/css">
  #fixed_div {
    position: absolute;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
  }
</style>
<script type="text/javascript">
window.setInterval(move_box, 100);
</script>
<![endif]-->

I usually put this last part right before the end of the body (I guess you could just put the whole script there). This is because you don’t want the window.setInterval to fire before your fixed div is declared. You could use the body onload but I try to stay away from that because I know it is popular for other uses on more advanced pages and I don’t want to run the risk of interfering.

Here is the whole script put together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 . . .
<style type="text/css">
  #fixed_div {
    position: fixed;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
    /* add additional styling, etc. */
  }
</style>
<script type="text/javascript">
function move_box() {
    var offset = 0; // set offset (likely equal to your css top)
    var element = document.getElementById('fixed_div');

    element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}
</script>
 . . .
</head>
<body>
 . . .
<div id="fixed_div">I am fixed, even in IE6</div>
 . . .
<!--[if lt IE 7]>
<style type="text/css">
  #fixed_div {
    position: absolute;
    top: 0px; /* tweak this according to placement */
    left: 0px; /* tweak this according to placement */
  }
</style>
<script type="text/javascript">
window.setInterval(move_box, 100);
</script>
<![endif]-->
</body>
</html>

NOTE: This will only work properly on pages that have a valid doctype definition. If you don’t use one [you should start or] you need to change document.documentElement.scrollTop to document.body.scrollTop in the move_box function.

You can also modify this script to apply to multiple elements by passing arguments to the function or something similar. If you are doing multiple elements on a single page, you may want to consider setting up some kind of Javascript array that tracks what elements need to be corrected, this could save you from having multiple window.setInterval instances running.

Mon 2007.02.26 [ Internet Explorer, Javascript, css ] 6 comments...
newer...
{
}