Placeholder visibility behaviour

[Mr. X.]

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

 

[Jukka K. Korpela]

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

 

[Mr. X.]

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

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

 

[Tim Streater]

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;

}

 

[Mr. X.]

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

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;

}

 

[Jukka K. Korpela]

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.

 

[Mr. X.]

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

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.

 

[Mr. X.]

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

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.

 

[Jukka K. Korpela]

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.