Css input hide placeholder on focus

Removing placeholder text on focus

Here is one of many workarounds to make all browsers behave like Chrome on this regard: github.com/ripper234/input-placeholder.

12 Answers 12

Interestingly the w3 Spec for placeholder allows for either behavior:

User agents should present this hint to the user, after having stripped line breaks from it, 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).

But, functionally speaking, there’s little reason to clear it before the user starts typing. Users tabbing through your form might never see it because they’ll tab into the field before seeing the placeholder text. Mouse users might not have finished reading the placeholder text before they click.

If your field is complex enough to require a placeholder, it probably requires some thought; what better time to think «what should I input?» than when you’re focused on the field? Why take away that hint from users focused in the field but confused as to what to type?

+1 I would go so far as to say it IS better to remove the text after they start typing, for the reasons you stated.

@webvitaly interesting touch, though I’d want to make it apparent that the placeholder isn’t a default/value, which is why I think they stray on the faded-out side instead of looking like normal text. I’ve also seen italics used to indicate this text isn’t real

My concern with placeholder text is that users may get confused that they cannot select and delete the text that is in the field. Are there any studies regarding placeholder text?

firefox is moving toward keeping the placeholder while empty and focused : bugzilla.mozilla.org/show_bug.cgi?id=673873

I would side with having the placeholder text show as long as possible without getting in the way.

The way it is done in Chrome is better, in my opinion.

I’ve found ways to get around this on all browsers, however.

What I’ve done in the past is remove the placeholder text on focus, but also re-displayed that text by making the label—which is almost always a duplicate of the placeholder and, if not, at least as or more descriptive—show up as a tab.

For example, here is part of my form with no fields in focus:

And here is part of my form with a field in focus:

This way, a user is never confused as to what exactly they’ve typed into a field. They can check back by re-focusing on the field.

Though in an example like this, why not just have labels above the fields? I understand that sometimes moving labels inside the fields is needed for space, but I also find that it’s done a lot of the time even when space is plentiful.

@JimmyBreck-McKye I’m not advocating the replacement of labels by placeholders, and this mechanism isn’t quite perfect, but maybe you’re thinking of this one at CSS Plus

@magzalez moving the labels above on focus is perhaps not less usable. So that’s OK. That said, it seems like an unnecessarily complex interaction that pretty much achieves the same end-result: a label above the field. You also lose the label after blurring, so that could be construed as a bit of a usability hit (especially on a large form)

I’m not sure I like the placeholder text being so high contrast; seems easy to confuse with normal text like a default value for that input, no? I do really like the «label» it forms when you’re typing though.

Removing it when you start typing is better

Depending on how the focus was moved to the input field, the user may not necessarily see the placeholder text before it quickly disappears.

Yes you might read it before you manually click in the field but perhaps not if you happened to tab into the field from the previous input.

There’s also the possibility that the first input field gets focus by default when a page is displayed, in which case the placeholder would still be good to see.

It shouldn’t look fixed if visually designed properly (most browsers, by default, gray out the placeholder text)>

Generally the backgound colour of inactive fields becomes grey. Grey placeholder text on a white (or otherwise «active colour») field should not indicate it’s disabled.

The change to preserve placeholder text on focus in the recent Firefox 15 release confused me the first time I saw it. I actually thought the field was disabled. In Firefox, the default styling (text color) of placeholder vs. disabled is very similar, and unlike Chrome, there isn’t a default focus highlight, so the main indication that the field is editable is the cursor which can be easy to miss. When you can’t highlight or delete the text that’s in your way, your first instinct if you’re unfamiliar with the UI convention is not necessarily to start typing anyway.

Although there are some good practical arguments for preserving the text on focus, there’s also a lot of precedent (at least in Windows) for the opposite behavior. One commenter pointed out that the search box in the Windows start menu works this way, and Firefox itself has several UI fields that clear on focus. The Windows start menu is actually an example of a hybrid approach. Its search box is initially focused and displays the text by default, but when the user manually focuses it, the text is cleared. I prefer this sort of compromise from a usability standpoint.

In an HTML environment, however, clean mapping to CSS (if only for override hacks) is also important, and there isn’t a selector for auto-focus vs. user-focus. And at this point, all the browser vendors seem to be in rare agreement, so it’s a bit late to be complaining. Perhaps a simpler compromise in Firefox would have been to add a default focus style for placeholder text that faded the placeholder text more on focus so the user had stronger feedback that the field could accept their typing even though there was still placeholder text in the way.

Setting aside implementation concerns in a particular browser, my preference in general remains to hide on focus. Although a large part of it is that it’s simply what I’m accustomed to, I think there’s also a fundamental aversion to trying to write in a space that’s not already blank. Experience with handwriting, typing (with a typewriter!) and computing has taught me that if there’s already text there, I need to do something about it first. I instinctively prefer a blank canvas before I start. I can adapt to the preserve on focus pattern, but I think it’s going to be difficult to feel entirely comfortable with it unless there’s more of a sense of the placeholder text getting out of the way when I focus the field for editing.

Источник

How to Auto-Hide a Placeholder Text on Focus with CSS and jQuery

The placeholder attribute describes the expected value of an input field. Before entering a value, a short hint is displayed in the field. One of the difficulties concerned with a placeholder text is making it auto-hide upon focus.

To find a solution to this, we suggest you read our snippet. We’ll demonstrate how to make a placeholder text auto-hide upon focus using HTML, CSS, and jQuery.

The simplest way of auto-hiding a placeholder text upon focus is using the onfocus and onblur events with the element. This is quite easy if you follow the steps below.

Create HTML

• Use an element with the type attribute.
• Add a placeholder attribute.
• Add the onfocus and onblur events.

Example of auto-hiding the placeholder text with HTML:

html> html> head> title>Title of the document title> head> body> input type="text" placeholder="enter your text" onfocus="this.placeholder=''" onblur="this.placeholder='enter your text'" /> body> html>

In the next example, we use the :focus pseudo-class and ::placeholder pseudo-element.

Example of auto-hiding the placeholder text with CSS:

html> html> head> title>Title of the document title> style> input:focus::placeholder < color: transparent; > style> head> body> input type="text" placeholder="Enter your text"> body> html>

Result

Example of auto-hiding the placeholder text with CSS and jQuery:

html> html> head> title>Title of the document title> style> li < padding: 15px; > input < padding: 8px; > style> head> body> form> ul class="field-set field-set-stacked"> li class="field field-text"> input type="text" placeholder="Enter your name" /> li> li class="field"> input type="text" placeholder="Enter your email address" /> li> li class="field"> input type="text" placeholder="Enter your phone number" /> li> ul> form> script> $("input") .each( function( ) < $(this) .data('holder', $(this) .attr('placeholder')); $(this) .focusin(function( ) < $(this) .attr('placeholder', ''); >); $(this) .focusout(function( ) < $(this) .attr('placeholder', $(this) .data('holder')); >); >); script> body> html>

Источник

Исчезающий placeholder при фокусе

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. Если мы посмотрим html-справочник, то найдем там следующее описание – выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.

К сожалению скрывание placeholder-а происходит по-разному – где то при получении фокуса, а где то при наличии хотя бы одного введенного символа. Мне нравится именно первый вариант, но как сделать его для всех браузеров, которые его поддерживают? Для этого определим следующие правила:

:focus::-webkit-input-placeholder < color: transparent >:focus::-moz-placeholder < color: transparent >:focus:-moz-placeholder < color: transparent >:focus:-ms-input-placeholder

Скрываем placeholder красиво

Как реализовать скрытие placeholder в одном стиле для всех браузеров разобрались, теперь посмотрим, как можно это анимировать.

Плавное изменение прозрачности:

input::-webkit-input-placeholder input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder input:focus::-webkit-input-placeholder input:focus::-moz-placeholder input:focus:-moz-placeholder input:focus:-ms-input-placeholder
input::-webkit-input-placeholder input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder input:focus::-webkit-input-placeholder input:focus::-moz-placeholder input:focus:-moz-placeholder input:focus:-ms-input-placeholder
input::-webkit-input-placeholder input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder input:focus::-webkit-input-placeholder input:focus::-moz-placeholder input:focus:-moz-placeholder input:focus:-ms-input-placeholder

Поддержка устаревшими браузерами

Сейчас placeholder работает только в современных браузерах, но существует JS плагин, который позволяет не изобретая велосипедов делать этот атрибут кроссбраузерным – placeholder.js

Похожие записи

Источник

hide placeholder with css

I’m working with a responsive theme. And I’m facing the input form problem here. In the desktop view, the input will not have placeholder but have label. However, when it comes to the mobile view, I will hide this input label and change this label with placeholder.

because CSS can not manipulate the attribute of a HTML tag. CSS can provide the style. you can do with JavaScript/Jquery

but you can try one thing.. set the placeholder color as your background color so it will look like you dont have placeholder..

7 Answers 7

This will hide the placeholder only for desktops (and large tablets):

@media (min-width:1025px) and (min-width:1281px) < ::-webkit-input-placeholder < /* WebKit browsers */ color: transparent; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: transparent; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: transparent; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: transparent; >input::placeholder < color: transparent; >textarea::-webkit-input-placeholder < /* WebKit browsers */ color: transparent; >textarea:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: transparent; >textarea::-moz-placeholder < /* Mozilla Firefox 19+ */ color: transparent; >textarea:-ms-input-placeholder < /* Internet Explorer 10+ */ color: transparent; >textarea::placeholder < color: transparent; >> 

Folks, actually what did not work was the Stackoverflow snippet. I have removed it and replaced it with a Codepen link.

CSS only provides the styling, it can not remove the actual placeholder.

What you can do it, set the placeholder text color as your background color of textbox, so it will look like you don’t have placeholder..

::-webkit-input-placeholder < /* WebKit browsers */ color: #fff; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: #fff; >

Could you clarify what you mean in the first sentence, please? I don’t quite understand the statement.

If your browser supports styling the placeholder, it also supports rgba(255,255,255,0) . Your solution only works for white inputs.

@Edmund, he asked to hide the placeholder text. Not txtbox itself. If you will use display, opacity or visibility it will hide txtbox itself. But requirements was to hide just placeholder text inside txtbox. Hope it make sense.

You can use media queries and hide and show based on required resolution:

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) < ::-webkit-input-placeholder < color: lightgray !important; >:-moz-placeholder < /* Firefox 18- */ color: lightgray !important; >::-moz-placeholder < /* Firefox 19+ */ color: lightgray !important; >:-ms-input-placeholder < color: lightgray !important; >#labelID < display:none !important; >> 

Normal Styles

::-webkit-input-placeholder < color: transparent; >:-moz-placeholder < /* Firefox 18- */ color: transparent; >::-moz-placeholder < /* Firefox 19+ */ color: transparent; >:-ms-input-placeholder < color: transparent; >#labelID

Источник