/    Sign up×
Community /Pin to ProfileBookmark

change color onclick for default textbox value

Copy linkTweet thisAlerts:
Jan 12.2011

Hello,

I’ve been trying to make a default value in a text box go away when clicked.

The general consensus on this forum and on the rest of the internet seems to be that this code:
[FONT=”Courier New”]<script>
function clearText(field){
if (field.defaultValue == field.value) field.value = ”
else if (field.value == ”) field.value = field.defaultValue;
}
</script>

<body>
<input name=”emailaddress” type=”text” id=”email_box” value=”Enter Your Email Address” onFocus=”clearText(this)” onBlur=”clearText(this)”>
</body>[/FONT]

works pretty well. But I wonder how I can add a color change to this function. They default value “enter email address here” would be in grey, but when the user begins to type, it would be black. then deleted what’d been typed, back to grey.

document.getElementById(email_box).style.color=’#000000′; …..is that too naïve..? It didn’t work no matter where I put it. And dreamweaver didn’t like it when I tried to copy the syntax of the first function, but make it change colors instead. It furthermore hated me trying to assign two different functions to the onClick event.

It also didn’t like at all when I tried to apply two classes to the same object…

All in all, it’s been pretty disagreeable today.

Thank you in advance to anyone who can help me out!

Thomas

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@trandrusJan 12.2011 — this should work:

css:
[CODE]#email_box {
color:#999;
}[/CODE]

js:
[CODE]function clearText(field)
{
if (field.defaultValue == field.value) {

field.value = '';
field.style.color = '#000000';

} else if (field.value == '') {

field.value = field.defaultValue;
field.style.color = '#999999';
}
}[/CODE]
Copy linkTweet thisAlerts:
@loren_hibbard_iauthorJan 12.2011 — Hi trandrus,

That is massively helpful: Thank you!

Is «defaultValue» a built-in javascript function? Ditto «field»? Because then if «onFocus="clearText(this)"» passes «this» to your function in a way in which javascript recognizes «this» as a (text)field, your code actually sort of makes sense to me...if «this» is the sort of thing that can be put into a line of html (which I wasn't previously aware of)....

If this is all garbage, I have to apologize: your code is too concise for me ? Would it be too much an imposition to ask you to explain a bit how it works?

Many thanks!

Thomas
Copy linkTweet thisAlerts:
@KorJan 12.2011 — Hi trandrus,

That is massively helpful: Thank you!

Is &#171;defaultValue&#187; a built-in javascript function? Ditto &#171;field&#187;? Because then if &#171;onFocus="clearText(this)"&#187; passes &#171;this&#187; to your function in a way in which javascript recognizes &#171;this&#187; as a (text)field, your code actually sort of makes sense to me...if &#171;this&#187; is the sort of thing that can be put into a line of html (which I wasn't previously aware of)....

If this is all garbage, I have to apologize: your code is too concise for me ? Would it be too much an imposition to ask you to explain a bit how it works?

Many thanks!

Thomas[/QUOTE]

  • - the [B]defaultValue[/B] is a [I]native[/I] JavaScript property of the form's elements. It will return always the value (if set by default - i.e. physically written) of the HTML native attribute [B]value[/B].


  • - [B]this[/B] is a sort of self-reference of an element. In your case, it is the reference of the text field.


    • But it depends on the syntax. [B]this[/B] might refer a new created object within a constructor. Or simply the Window Global Object, if it is written within a function which is not a constructor.
    ×

    Success!

    Help @loren_hibbard_i spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...