Question

I have two label elements. I want the first one to be shown all the time but the second one needs to be hidden on focus.

How I can get this result with jQuery?

<dd>
    <label for="checkcode" class="check_label">=</label>
    <label for="checkcode" class="checkcode_label">enter code</label>
    <img src="/captcha" id="captcha" />
    <input id="checkcode" type="text" name="checkcode" value="" />
</dd>

I need to use the two defined “label” to get the needed result. Is not possible to set “value”.

Answer 1

This label is not necessary use the input and CSS for styling. If your target browser is modern capable use placeholder attribute, and css :focus to change style on input:

1. When input is not focused

   .checkcodeClass {
   border : 0;
   }

2. When focused

   .checkcodeClass:focus {
   border : 1px solid black;
   }

For browsers that not support placeholder:

1. Use jquery to put placeholder https://github.com/danielstocks/jQuery-Placeholder

For browsers that not support CSS :focus:

1. Use jquery ‘on’ with blur and focus to alternate class.