Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: HTML5: Placeholder and autofocus together

Reply
Thread Tools

Re: HTML5: Placeholder and autofocus together

 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      07-13-2012
2012-07-13 11:08, Ed Jay wrote:

> Is there a method for simultaneously using placeholder and autofocus
> together in the same input element? With autofocus, the cursor in the
> input field triggers removal of the placeholder text.


That's pretty much asking how to eat a cake without eating it, since the
very idea of placeholder is that it is not displayed when the element is
not focused on. It has been added to HTML (drafts) with good intentions,
hoping to remove some of the problems of doing such things in JavaScript
(e.g., wiping out actual user input when things are not properly timed).
But for the most of it, the autofocus attribute is a pitfall to be avoided.

The placeholder attribute is another pitfall. Although the HTML5 draft
says that "The placeholder attribute should not be used as an
alternative to a label", such usage is really what people have for it.
And this tends to reduce accessibility.

Technically, the placeholder attribute is vaguely defined:
"User agents should present this hint to the user [...], when the
element's value is the empty string and/or the control is not focused
(e.g. by displaying it inside a blank unfocused control and hiding it
otherwise)."
http://www.whatwg.org/specs/web-apps...lder-attribute

In practice, Firefox seems to implement this the simple way, reading
"and/or" as "and". Thus, if the field is focused (or if it is
non-empty), the placeholder text is not shown. Chrome, on the other
hand, reads it as "or", so <input autofocus placeholder="foo"> initially
has the placeholder text (if there is no value attribute).

--
Yucca, http://www.cs.tut.fi/~jkorpela/


 
Reply With Quote
 
 
 
 
Tim Streater
Guest
Posts: n/a
 
      07-13-2012
In article <(E-Mail Removed)>,
Ed Jay <(E-Mail Removed)> wrote:

> Jukka K. Korpela wrote:
>
> >2012-07-13 11:08, Ed Jay wrote:
> >
> >> Is there a method for simultaneously using placeholder and autofocus
> >> together in the same input element? With autofocus, the cursor in the
> >> input field triggers removal of the placeholder text.

> >
> >That's pretty much asking how to eat a cake without eating it, since the
> >very idea of placeholder is that it is not displayed when the element is
> >not focused on.

>
> Is displayed when not focused on?
>
> >It has been added to HTML (drafts) with good intentions,
> >hoping to remove some of the problems of doing such things in JavaScript
> >(e.g., wiping out actual user input when things are not properly timed).
> >But for the most of it, the autofocus attribute is a pitfall to be avoided.
> >
> >The placeholder attribute is another pitfall. Although the HTML5 draft
> >says that "The placeholder attribute should not be used as an
> >alternative to a label", such usage is really what people have for it.
> >And this tends to reduce accessibility.
> >
> >Technically, the placeholder attribute is vaguely defined:
> >"User agents should present this hint to the user [...], when the
> >element's value is the empty string and/or the control is not focused
> >(e.g. by displaying it inside a blank unfocused control and hiding it
> >otherwise)."
> >http://www.whatwg.org/specs/web-apps...mon-input-elem
> >ent-attributes.html#the-placeholder-attribute
> >
> >In practice, Firefox seems to implement this the simple way, reading
> >"and/or" as "and". Thus, if the field is focused (or if it is
> >non-empty), the placeholder text is not shown. Chrome, on the other
> >hand, reads it as "or", so <input autofocus placeholder="foo"> initially
> >has the placeholder text (if there is no value attribute).

>
> Thank you very much for your comprehensive response.


I find it irritating in Safari, too, that focus and placeholder text can
be there together. Even though the placeholder text is in grey rather
than black, I'm always tempted to try to select it and then hit delete.
Of course it vanishes when you starts to type. Perhaps I should
experiment with setting it to ' ' and then to ''.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
 
 
 
BootNic
Guest
Posts: n/a
 
      07-15-2012
In article <(E-Mail Removed)>,
Tim Streater <(E-Mail Removed)> wrote:

>> Jukka K. Korpela wrote:
>>
>>> 2012-07-13 11:08, Ed Jay wrote:
>>>>
>>>> Is there a method for simultaneously using placeholder and
>>>> autofocus together in the same input element? With autofocus,
>>>> the cursor in the input field triggers removal of the
>>>> placeholder text.


[snip]

>>> Technically, the placeholder attribute is vaguely defined:
>>> "User agents should present this hint to the user [...], when
>>> the element's value is the empty string and/or the control is
>>> not focused (e.g. by displaying it inside a blank unfocused
>>> control and hiding it otherwise)."


[snip]

>>> In practice, Firefox seems to implement this the simple way,
>>> reading "and/or" as "and". Thus, if the field is focused (or if
>>> it is non-empty), the placeholder text is not shown. Chrome, on
>>> the other hand, reads it as "or", so <input autofocus
>>> placeholder="foo"> initially has the placeholder text (if there
>>> is no value attribute).


[snip]

> I find it irritating in Safari, too, that focus and placeholder
> text can be there together. Even though the placeholder text is
> in grey rather than black, I'm always tempted to try to select it
> and then hit delete. Of course it vanishes when you starts to
> type. Perhaps I should experiment with setting it to ' ' and then
> to ''.


I don't have a version of Safari that displays the placeholder text when
focused.

The following may just change the color for webkit browsers that display
placeholder text when focused.

[placeholder]:focus::-webkit-input-placeholder {
color: transparent;
}


--
BootNic Sun Jul 15, 2012 09:54 am
Bootnic is sharp, all right. Of course he can't compare to his older brother,
Sputnik, who spun out of control some years ago, but we still look up to him
in awe.
*Neredbojias*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlACy40ACgkQOcdbyBqMFBF4/ACfcfU/vIjw/K5NkFSY1FVcq5cT
v+4AoMTZRJqOudqPTzPJwIk/5Wb5qr6N
=IUqv
-----END PGP SIGNATURE-----

 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      07-15-2012
In article <(E-Mail Removed)>,
BootNic <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>,
> Tim Streater <(E-Mail Removed)> wrote:


> > I find it irritating in Safari, too, that focus and placeholder
> > text can be there together. Even though the placeholder text is
> > in grey rather than black, I'm always tempted to try to select it
> > and then hit delete. Of course it vanishes when you starts to
> > type. Perhaps I should experiment with setting it to ' ' and then
> > to ''.


I should have realised this wasn't going to work. As soon as I entered
the space, the placeholder text vanished. When I deleted the space, it
came back again.

> I don't have a version of Safari that displays the placeholder text when
> focused.


I have 5.1.7 - what version are you running?

> The following may just change the color for webkit browsers that display
> placeholder text when focused.
>
> [placeholder]:focus::-webkit-input-placeholder {
> color: transparent;
> }


I'll give that a whirl.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      07-15-2012
In article <(E-Mail Removed)>,
Tim Streater <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>,
> BootNic <(E-Mail Removed)> wrote:
>
>> In article <(E-Mail Removed)>,
>> Tim Streater <(E-Mail Removed)> wrote:

>
>>> I find it irritating in Safari, too, that focus and placeholder
>>> text can be there together. Even though the placeholder text is
>>> in grey rather than black, I'm always tempted to try to select
>>> it and then hit delete. Of course it vanishes when you starts
>>> to type. Perhaps I should experiment with setting it to ' ' and
>>> then to ''.

>
> I should have realised this wasn't going to work. As soon as I
> entered the space, the placeholder text vanished. When I deleted
> the space, it came back again.
>
>> I don't have a version of Safari that displays the placeholder
>> text when focused.

>
> I have 5.1.7 - what version are you running?


os: win 7
5.1.7(7534.57.2)

>> The following may just change the color for webkit browsers that
>> display placeholder text when focused.
>>
>> [placeholder]:focus::-webkit-input-placeholder {
>> color: transparent;
>> }

>
> I'll give that a whirl.


This feature is also present in:
• Google Chromium on xp

• Chromium on Ubuntu 12.04 LTS


--
BootNic Sun Jul 15, 2012 11:14 am
When men are pure, laws are useless; when men are corrupt, laws are broken.
*Benjamin Disraeli*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlAC3lwACgkQOcdbyBqMFBFvtQCfSLYhNRv/wGCWK9uWmBBlfP6L
aFsAoLkUCWE55JPTp6PWu7sqdTcWd/uk
=ip16
-----END PGP SIGNATURE-----

 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      07-15-2012
In article <(E-Mail Removed)>,
BootNic <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>,
> Tim Streater <(E-Mail Removed)> wrote:
>
> > In article <(E-Mail Removed)>,
> > BootNic <(E-Mail Removed)> wrote:
> >
> >> In article <(E-Mail Removed)>,
> >> Tim Streater <(E-Mail Removed)> wrote:

> >
> >>> I find it irritating in Safari, too, that focus and placeholder
> >>> text can be there together. Even though the placeholder text is
> >>> in grey rather than black, I'm always tempted to try to select
> >>> it and then hit delete. Of course it vanishes when you starts
> >>> to type. Perhaps I should experiment with setting it to ' ' and
> >>> then to ''.

> >
> > I should have realised this wasn't going to work. As soon as I
> > entered the space, the placeholder text vanished. When I deleted
> > the space, it came back again.
> >
> >> I don't have a version of Safari that displays the placeholder
> >> text when focused.

> >
> > I have 5.1.7 - what version are you running?

>
> os: win 7
> 5.1.7(7534.57.2)


Hmmm, perhaps it's just Safari Mac they've done it to. I submitted a bug
report about this but have heard nothing (and I submitted another more
serious report, that they asked me for more details of and to send them
a minimal example to demonstrate the problem. They seem to have fixed
*that* one).

> >> The following may just change the color for webkit browsers that
> >> display placeholder text when focused.
> >>
> >> [placeholder]:focus::-webkit-input-placeholder {
> >> color: transparent;
> >> }


Thanks! That worked a treat.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
gmgj gmgj is offline
Junior Member
Join Date: Dec 2013
Posts: 1
 
      12-30-2013
I have the same issue with Safari Windows and I want the placeholder to work
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Build control in a placeholder or like a placeholder nail ASP .Net Building Controls 0 09-10-2004 07:57 PM
Olympus C 8080 autofocus and shutter lag performance Bill A Digital Photography 6 07-11-2004 04:22 PM
Canon A70, horizontal lines and autofocus noise. Roger W Digital Photography 7 10-08-2003 07:35 PM
10d autofocus and teleconvertor Don Digital Photography 45 08-29-2003 10:40 AM
Autofocus and the Minolta Dimage 7Hi Rick Dunklee Digital Photography 3 08-27-2003 07:45 PM



Advertisments