Hello all,

I have a question about text fields in a form.

I would like to input an initial value of a sentence. When the user puts the cursor in the text field I would like the initial value to dissappear completely.

Is this possible and if so how? Any help would be greatly appreciated.

Thanks.

<h6>JUXTAFLO_</h6>
<img src="www.juxtaflo.com/images/flashkit_footer.jpg" border=0>

Tyr putting this code below the body tag

<pre id=code><font face=courier size=2 id=code>&lt;script&gt;
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
&lt;/script&gt;</font id=code></pre id=code>

and put <b>onFocus="clearText(this)"</b> in the input tag

that shoud clear the initial value

Adding this to your form is extremely simple. We created a generic function, clearDefault() that can be used on any text input box:

<pre id=code><font face=courier size=2 id=code>function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
} </font id=code></pre id=code>

Next, you need to call this script from the onfocus event of your input text box:

<pre id=code><font face=courier size=2 id=code>
ONFOCUS="clearDefault(this)" </font id=code></pre id=code>

That's it! This works because initial value of the value attribute is assigned to the defaultValue property in JavaScript. When an input element receives the focus, we check if the defaultValue is the same as the current value. If they are equal, the text box is cleared before the user starts typing.

This technique can be further improved with dynamic styles in Internet Explorer by also using a different color for the default value.

In Internet Explorer 4.0 or later the default value in the e-mail field is red and the default value in the search field is italicized. In all browsers (except Navigator 4.0), the text is displayed unchanged. Netscape Navigator recognizes a few CSS attributes on the input element as well as misinterprets others (eg., text-align: center centers the entire line of text). When Netscape recognizes the CSS attribute, it cannot be dynamically changed. This happens in the search field above where the text stays italicized.

For this example, we used an enhance version of the clearDefault function:

<pre id=code><font face=courier size=2 id=code>&lt;SCRIPT&gt;
function clearDefaultandCSS(el) {
if (el.defaultValue==el.value) el.value = ""
// If Dynamic Style is supported, clear the style
if (el.style) el.style.cssText = ""
}
&lt;/SCRIPT&gt;</font id=code></pre id=code>and
<pre id=code><font face=courier size=2 id=code> ONFOCUS="clearDefaultandCSS(this)"</font id=code></pre id=code>

======================
janusz.monkey-it.co.uk

Thank you wayne1000 and janusz_monkey!! That worked perfectly. You two rock like Twisted sister.

<h6>JUXTAFLO_</h6>
<img src="www.juxtaflo.com/images/flashkit_footer.jpg" border=0>

... maybe Black Sabbath?

Janusz

======================
janusz.monkey-it.co.uk

ASP | VBScript | IIS 5.1 | Windows XP Pro | Linux Redhat 9 | SuSE 9 Pro | Linux FreeBSD 4.9 | PHP 5.0.0 Beta 2 | MySQL 4.0 | Apache 2.0.48 | Macromedia Studio w/t Flash 2004 | Microsoft Office Pro 2003 | Mozilla Firebird 0.7 | IE 6 | B.O.R.E.D @ HoMe