When I visited the Twitter login page, I noticed something interesting - the labels for input fields were inside the input fields themselves. It seemed to be accomplished using a common trick involving javascript/jquery. Intrigued, I delved into the Twitter source code to see how they achieved this unique design. Upon inspecting their code, I came across an onChange event that added a class 'hasome' to a parent div and included a default text as a span element, which curiously did not have the property display:none applied to it.
Despite my efforts to analyze their HTML/CSS/JS files, I could not pinpoint the exact methods they were using. So, I'm reaching out to ask if anyone can shed some light on how Twitter is able to pull off this clever UI feature?
Edit Twitter's implementation:
<div class="placeholding-input username hasome">
<input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
<span class="placeholder">Username or email</span>
</div>
I've included the relevant snippet of Twitter's HTML in this question. It appears that by adding just one class 'hasome' to the parent div, the desired effect is achieved. However, upon inspection using browser tools like Firebug, no specific properties seem to be assigned to the 'hasome' class. This leaves me wondering where exactly in their codebase this functionality is defined, or whether CSS plays a role in achieving this interaction.