Placeholder visibility behaviour

Discussion in 'HTML' started by Mr. X., Jan 11, 2013.

  1. Mr. X.

    Mr. X. Guest

    Hello.
    I want to make an input tag, with placeholder.
    Can I make the placeholder be visible, even I focus on the field (if the
    input field is not empty, that means at least one character on the input
    field, I want to make the placeholder invisible)?

    Thanks :)
     
    Mr. X., Jan 11, 2013
    #1
    1. Advertising

  2. 2013-01-11 10:07, Mr. X. wrote:

    > I want to make an input tag, with placeholder.
    > Can I make the placeholder be visible, even I focus on the field (if the
    > input field is not empty, that means at least one character on the input
    > field, I want to make the placeholder invisible)?


    That would be against the very idea of the attribute:
    http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

    The HTML5 CR is somewhat vague (perhaps intentionally) as regards to
    whether the placeholder text becomes visible on focus or when the field
    content becomes nonempty. But it explicitly say that it may become
    invisible on focus.

    So if you want something else, you need to do it yourself. A simple
    setup is to position a <span> element in the same place as the <input>
    element, with a larger z-index, and have event handlers in the <input>
    element to detect its becoming nonempty, in which case the z-index value
    is changed to hide the "placeholder".

    You would then need to decide whether the "placeholder" should become
    visible again if the <input> content becomes empty again (e.g., the user
    has written one character, then deletes it).

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 11, 2013
    #2
    1. Advertising

  3. Mr. X.

    Mr. X. Guest

    Well,
    I did some workarround, and see a site
    http://robertnyman.com/2011/05/02/h...tive-approach-introducing-roberts-playground/

    which states with some better words ...
    "And honestly, I must say that that is quite a nice way to do it. When you
    have set focus to the field, you might have forgotten what the hint said,
    but if it’s still there it makes thing a bit easier."

    If you see some sites, such as facebook on IPAD - you see that behaviour I
    meant.

    That's exactly what I want, but I didn't succeed implement the code behinds
    that site (I think that javascript has some problem ...)

    Can you lead me to some better source (maybe jquery?)

    Thanks :)



    "Jukka K. Korpela" wrote in message news:kcokic$a5j$...

    2013-01-11 10:07, Mr. X. wrote:

    > I want to make an input tag, with placeholder.
    > Can I make the placeholder be visible, even I focus on the field (if the
    > input field is not empty, that means at least one character on the input
    > field, I want to make the placeholder invisible)?


    That would be against the very idea of the attribute:
    http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

    The HTML5 CR is somewhat vague (perhaps intentionally) as regards to
    whether the placeholder text becomes visible on focus or when the field
    content becomes nonempty. But it explicitly say that it may become
    invisible on focus.

    So if you want something else, you need to do it yourself. A simple
    setup is to position a <span> element in the same place as the <input>
    element, with a larger z-index, and have event handlers in the <input>
    element to detect its becoming nonempty, in which case the z-index value
    is changed to hide the "placeholder".

    You would then need to decide whether the "placeholder" should become
    visible again if the <input> content becomes empty again (e.g., the user
    has written one character, then deletes it).

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Mr. X., Jan 11, 2013
    #3
  4. Mr. X.

    Tim Streater Guest

    In article <kcokic$a5j$>,
    "Jukka K. Korpela" <> wrote:

    > 2013-01-11 10:07, Mr. X. wrote:
    >
    > > I want to make an input tag, with placeholder.
    > > Can I make the placeholder be visible, even I focus on the field (if the
    > > input field is not empty, that means at least one character on the input
    > > field, I want to make the placeholder invisible)?

    >
    > That would be against the very idea of the attribute:
    > http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute


    More recent versions of Safari implement that the placeholder text stays
    visible even when the input field has focus. The placeholder text
    vanishes when one character is typed into the field, and reappears if
    you remove all text from the input field. I found this to be very
    irritating - to my way of thinking, focussing there should also remove
    it. I was able to undo the symptoms of this behaviour by the following
    piece of CSS from some kind person (may even have been you :)


    [placeholder]:focus::-webkit-input-placeholder
    {

    color: transparent;

    }

    --
    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, Jan 11, 2013
    #4
  5. Mr. X.

    Mr. X. Guest

    For me, this is irritating to clear the input text field before entering a
    character, as I stated before:
    And honestly, I must say that that is quite a nice way to do it. When you
    have set focus to the field, you might have forgotten what the hint said,
    but if it’s still there it makes thing a bit easier.

    It's for smart phones. The page should be clear, with no extra height
    (that's why placeholder is great thing) - any clue how to do that?

    Thanks :)



    "Tim Streater" wrote in message
    news:...

    In article <kcokic$a5j$>,
    "Jukka K. Korpela" <> wrote:

    > 2013-01-11 10:07, Mr. X. wrote:
    >
    > > I want to make an input tag, with placeholder.
    > > Can I make the placeholder be visible, even I focus on the field (if the
    > > input field is not empty, that means at least one character on the input
    > > field, I want to make the placeholder invisible)?

    >
    > That would be against the very idea of the attribute:
    > http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute


    More recent versions of Safari implement that the placeholder text stays
    visible even when the input field has focus. The placeholder text
    vanishes when one character is typed into the field, and reappears if
    you remove all text from the input field. I found this to be very
    irritating - to my way of thinking, focussing there should also remove
    it. I was able to undo the symptoms of this behaviour by the following
    piece of CSS from some kind person (may even have been you :)


    [placeholder]:focus::-webkit-input-placeholder
    {

    color: transparent;

    }

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Mr. X., Jan 11, 2013
    #5
  6. 2013-01-11 15:54, Mr. X. wrote:

    > When you
    > have set focus to the field, you might have forgotten what the hint said,
    > but if it’s still there it makes thing a bit easier.


    So why don’t you simply use a label for the field, above it or on the
    left of it? Saving space by omitting crucial information is not good policy.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 11, 2013
    #6
  7. Mr. X.

    Mr. X. Guest

    I am sure there is a way doing that, because I have seen that behavior (even
    facebook acts like that).
    I cannot add label above etc. as I clarified, it need some place on the
    smart phone.

    "Jukka K. Korpela" wrote in message news:kcp6g8$7i5$...

    2013-01-11 15:54, Mr. X. wrote:

    > When you
    > have set focus to the field, you might have forgotten what the hint said,
    > but if it’s still there it makes thing a bit easier.


    So why don’t you simply use a label for the field, above it or on the
    left of it? Saving space by omitting crucial information is not good policy.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Mr. X., Jan 11, 2013
    #7
  8. Mr. X.

    Mr. X. Guest

    OK.
    I see that the link I gave first - solve the problem.
    I just need to put it on body.

    same script on
    http://github.com/robnyman/robnymanplayground/blob/master/placeholder/index.html

    Thanks, anyway

    "Jukka K. Korpela" wrote in message news:kcp6g8$7i5$...

    2013-01-11 15:54, Mr. X. wrote:

    > When you
    > have set focus to the field, you might have forgotten what the hint said,
    > but if it’s still there it makes thing a bit easier.


    So why don’t you simply use a label for the field, above it or on the
    left of it? Saving space by omitting crucial information is not good policy.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Mr. X., Jan 11, 2013
    #8
  9. 2013-01-11 16:40, Mr. X. wrote:
    > I cannot add label above etc. as I clarified, it need some place on the
    > smart phone.


    You did not clarify anything. You just wrote “the page should be clear,
    with no extra heightâ€, which is not a clarification, just a wrong prejudice.

    On a “a smart phone†(that is, a pocket-size computer, which can be used
    as a geolocation device, as a spirit level, as a compass, as a game
    console, as a text messaging device, as a web browser, etc., and
    according to some rumors even for something they call “telephonyâ€), it
    is important to focus on the important. When filling out a form, the
    most important things at any step are a form field and her label.

    If you haven’t got room for both of them, your design is clearly very
    wrong. So throw the rest away first, and add as many ingredients as
    conveniently fit.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 11, 2013
    #9
    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. trinitypete

    Placeholder Question

    trinitypete, Jul 1, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    1,087
    trinitypete
    Jul 1, 2003
  2. John
    Replies:
    1
    Views:
    373
    zPaul
    Jul 1, 2003
  3. John
    Replies:
    2
    Views:
    466
    William F. Robertson, Jr.
    Jul 2, 2003
  4. Andy Chambers
    Replies:
    1
    Views:
    393
    Daniel Dyer
    May 14, 2007
  5. nail

    Build control in a placeholder or like a placeholder

    nail, Sep 10, 2004, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    346
Loading...

Share This Page