Re: HTML5: Placeholder and autofocus together

Discussion in 'HTML' started by Jukka K. Korpela, Jul 13, 2012.

  1. 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-app...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).

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jul 13, 2012
    #1
    1. Advertising

  2. Jukka K. Korpela

    Tim Streater Guest

    In article <>,
    Ed Jay <> 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/current-work/multipage/common-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
     
    Tim Streater, Jul 13, 2012
    #2
    1. Advertising

  3. Jukka K. Korpela

    BootNic Guest

    In article <>,
    Tim Streater <> 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-----
     
    BootNic, Jul 15, 2012
    #3
  4. Jukka K. Korpela

    Tim Streater Guest

    In article <>,
    BootNic <> wrote:

    > In article <>,
    > Tim Streater <> 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
     
    Tim Streater, Jul 15, 2012
    #4
  5. Jukka K. Korpela

    BootNic Guest

    In article <>,
    Tim Streater <> wrote:

    > In article <>,
    > BootNic <> wrote:
    >
    >> In article <>,
    >> Tim Streater <> 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-----
     
    BootNic, Jul 15, 2012
    #5
  6. Jukka K. Korpela

    Tim Streater Guest

    In article <>,
    BootNic <> wrote:

    > In article <>,
    > Tim Streater <> wrote:
    >
    > > In article <>,
    > > BootNic <> wrote:
    > >
    > >> In article <>,
    > >> Tim Streater <> 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
     
    Tim Streater, Jul 15, 2012
    #6
  7. Jukka K. Korpela

    gmgj

    Joined:
    Dec 30, 2013
    Messages:
    1
    I have the same issue with Safari Windows and I want the placeholder to work
     
    gmgj, Dec 30, 2013
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. pranay

    HTML5 and HTTP

    pranay, Oct 18, 2009, in forum: HTML
    Replies:
    2
    Views:
    513
  2. cwdjrxyz
    Replies:
    15
    Views:
    1,034
    cwdjrxyz
    Oct 8, 2010
  3. fulio pen

    target and frame on html5

    fulio pen, Sep 30, 2011, in forum: HTML
    Replies:
    4
    Views:
    2,677
    fulio pen
    Oct 1, 2011
  4. nail

    Build control in a placeholder or like a placeholder

    nail, Sep 10, 2004, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    345
  5. CBlair1986

    Autofocus system

    CBlair1986, Feb 12, 2009, in forum: Ruby
    Replies:
    1
    Views:
    105
    Saji N. Hameed
    Feb 13, 2009
Loading...

Share This Page