[whatwg] Hide placeholder on input controls on focus

[Roger Hågensen]

On 2013-03-20 10:18, Markus Ernst wrote:
> The problem is that some users do not even start to type when they see 
> text in the field they focused. Thus I strongly believe that some 
> visible hint at the _focusing_ moment would be helpful for these 
> users. If the Opera and IE behaviour of totally hiding the placeholder 
> is considered as suboptimal, the placeholder could be blurred, made 
> semi-transparent or whatever; but I am sure that something should 
> happen when the control gets focus, and not only when the user starts 
> typing.

Have it dim/vanish at not just onfocus but onmouseover as well? (and 
TAB, but that should be the same as onfocus usually)
I agree that this would be beneficial.

Here is an example: (go to http://htmledit.squarefree.com/ or someplace 
similar or save it locally as .html and test it that way)

<style type="text/css">
/****** css start *****/

input::-webkit-input-placeholder
{ /* WebKit browsers */
     color: red;
}

input:hover::-webkit-input-placeholder
{ /* WebKit browsers */
     opacity:0.5;
     text-align:right;
}

input:focus::-webkit-input-placeholder
{ /* WebKit browsers */
     opacity:0.0;
}

input:placeholder
{ /* future standard!? */
     color: red;
}

input:placeholder:hover
{ /* future standard!? */
     opacity:0.5;
     text-align:right;
}

input:focus:placeholder
{ /* future standard!? */
     opacity:0.0;
}

/****** css end *****/
</style>

<!- ***** html start ***** ->
<input name="first_name" id="first_name" placeholder="Your first 
name..." type="text">
<!- ***** html end ***** ->


I only did webkit! (and what I assume will be the standard?)
Reason I did not add any css for IE 10 or Firefox 19 is that they fail 
(at least I could not easily get this to work in those browsers), Chrome 
25 handles this just fine.
Other than me playing around a little with the right align to visually 
move the placeholder text "out of the way", I assume this is how you 
would like it to look/behave Markus?

So maybe a placeholder opacity of 0.5 on hover, and opacity of 0.0 on 
focus would be a suitable browser default. (web authors should still be 
able to style the behavior like I just did)

-- 
Roger "Rescator" Hågensen.
Freelancer - http://www.EmSai.net/