Dynamic label that changes based upon event handler

I have a snippet of HTML that is part of a form where there are two input's. Via CSS I have managed to make the label associated with each input to sit inside their corresponding input to act as a placeholder.

Now, with some standard JS (not JQuery I'm afraid), I wanted to capture the event that the user does (i.e. on a mouse click or keyboard press) on the input and dynamically change the look and feel of the label.


The conditions that I need to meet are:

When a user clicks on the input for the first time. The label changes colour to a light grey. After click, if the user then enters a character, the label disappears and the character you have just pressed is displayed instead.

When a user clicks on the input for the first time. The label changes colour to a light grey. After click, if the user then clicks or tabs away from the input, the label changes colour back to it's original state of black.

After entering a few characters into the input, if the user decides to delete the whole set of characters by either pressing backspace deleting each character until none are left or highlighting the whole set of characters with a mouse and presses the delete key, the label appears but is in a light grey colour.

Any help you can offer with the JS would be great!

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Atique AnsariCommented:
Please go to below URL.


Let me know if you need more details.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kim WalkerWeb Programmer/TechnicianCommented:
You would need to set up three events on each input tag.
1. an "onfocus" event to change the color of the label when the input element receives focus (is clicked or tabbed into)
2. an "onkeypress" event to hide the label if the value of the input is not empty (fires every time a key is pressed)
3. an "onblur" event to check whether the input value is empty and unhide the label when the element no longer has focus (click away from or tab out of the element)

#2 and #3 are somewhat redundant but keypress events can be finicky.
JaXLAuthor Commented:
@atique_ansari: is there a old school JavaScript way around what you have just done? Appreciate that you have come up with a JQuery which looks great and probably a lot better but my hands are tied not to use JQuery.

@xmediaman: is it possible if you could give me an example of what you mean with the event handlers you mention in relation to my conditions?
Kim WalkerWeb Programmer/TechnicianCommented:
Here is a simplified version:
<input type="text" name="text1" id="text1" value="" onfocus="javascript: document.getElementById('label1id').style.color='gray';" onkeypress="javascript: if(document.getElementById('text1').value == '') {document.getElementById('label1id).style.display='inline';} else {document.getElementById('label1id).style.display='none';}" onblur="javascript: if(document.getElementById('text1').value == '') {document.getElementById('label1id).style.display='inline';} else {document.getElementById('label1id).style.display='none';} document.getElementById('label1id').style.color='black';">

Open in new window

If you know how, it would be better to define three javascript functions in a script element to call in your input events.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.