keep placeholder on focus in IE10
Asked Answered
W

7

67

Under WebKit and Firefox, the text in a input's placeholder sticks around on focus—it doesn't disappear until input.val actually has something in it.

Is there a good way to force IE10 to do the same thing?

Wendel answered 21/1, 2013 at 19:34 Comment(13)
@JayBlanchard: There is? What is it? I think he tried using <input type="text" placeholder="text" /> and the placeholder disappeared on focus in IE 10. What do you suggest he try? I don't think there's a "don't hide placeholder" option or something.Yardarm
@RocketHazmat I answered his question. He asked if there was a good way and I responded appropriately. It is just as valuable as your answer of not using IE10.Croupier
@JayBlanchard: That wasn't an answer, I was just joking around. I don't know what you expected him to try, because I Googled this and there isn't much info. I'm curious to know what the good way you know about it.Yardarm
Here is what I found by Googling: "If you locally preview a site that uses HTML5 and CSS3 features (placeholder text, round corners etc.) in IE10, using the EW Development Server or IIS, you may find that these features don't display. This is because the default browser mode for intranet sites in IE10 is 'Compatibility mode'." ew-resource.co.uk/ie10-be-prepared.aspxCroupier
@RocketHazmat my answer was as tongue-in-cheek as your's was. I posted something that may help.Croupier
@JayBlanchard: I don't think that has anything to do with the issue here as I'm assuming the placeholder is appearing, but it's always good to disable IE's "Compatibility Mode", it's terrible.Yardarm
@RocketHazmat he may have to resort to a polyfill or plugin of some sort if disabling Compatibility Mode doesn't work.Croupier
@JayBlanchard: Sorry, I didn't mean to be mean. :-)Yardarm
No worries @RocketHazmat - it's all good. :-)Croupier
Checking Firefox now, you're right about how it behaves, but I'm convinced that in older versions it used to act the way you're saying IE10 does. I remember being annoyed by it in the past. Maybe the spec has changed fairly recently? For what it's worth, IE11 is doing the same as IE10.Vince
It's worth saying that one reason you might be unhappy about this is if you're using the placeholder as a substitute for a label. Please note that the HTML5 spec makes it very clear that this usage is frowned upon -- see 456bereastreet.com/archive/201204/…Vince
@Spudley, agreed... placeholders are not a substitute for labels. But I have one piece of a UI that would benefit from the IE placeholder working correctly!Cay
But the real question is: is there a way to destroy Internet Explorer and all its family, ancertors and futures??? I started coding for the web in 1997, and this crap is still around...Zack
P
45

The :-ms-input-placeholder pseudo-class documentation from the Internet Explorer Developer Center seems to imply this is working as designed.

The placeholder text is displayed with the specified style until the field has focus, meaning that the field can be typed into. When the field has focus, it returns to the normal style of the input field and the placeholder text disappears.

Edit: If I had to mimic this behavior, I would look at placeholder polyfill libraries (that set the default value, float grey text over the input box, etc) which work with older versions of IE. They would have to be modified, because they probably feature detect the placeholder capability and defer to the browser. Also, this would have a "browser detect" code smell.

Update: An "IE placeholder text disappears" question was asked during a Twitter #AskIE question session on June 19, 2014 and @IEDevChat responded "We have an active bug for this behavior. Next version will provide a fix"

Pauper answered 22/4, 2013 at 2:20 Comment(15)
Unfortunately, it leaves the user staring at an empty blinking field, with no hint to tell them what they are being asked to put in it.Crept
This is not the correct answer as the question is: Is there a good way to force IE10 to do the same thing? (keep placeholder visible on focus)Ieyasu
@DeborahSpeece: "Unfortunately, it leaves the user staring at an empty blinking field, with no hint to tell them what they are being asked to put in it." Well, your field should have a <label> element as well. placeholder isn't a replacement for <label>, and <label> should indicate what is meant to go in the field.Rimester
If you have a label, the placeholder usually just repeats it. That adds clutter for the user to process and makes forms harder, not easier, to use. For me, the whole benefit of placeholders is that they eliminate the need for a label - when they work correctly.Crept
On IE10 the placeholder are still getting disappeared on Focus. Don't know whyMusquash
Update: David Catuhe, September 26, 2015: "Hey! the issue should be fixed in the next build :)"Triumph
@DeborahSpeece Placeholders do not eliminate the need for a label. When Eliminating a label in favor of a placeholder you are designing directly contrary to the specification: w3.org/TR/2011/WD-html5-20110525/… And I quote: "The placeholder attribute should not be used as an alternative to a label."Penitentiary
@CamiloMartin Can you please provide the link for this bug in IE11?Scooter
@BilboBaggins Maybe it was fixed since - also, they have bugtrackers too? Wow, IE development team has come a long way.Southard
@Penitentiary I respectfully disagree. If user sees label in the input, that is a label, and an additional label outside the box is redundant, not helpful to the user, and takes up valuable screen space. Rules and guidelines change, as they should when they don't make sense.Crept
@DeborahSpeece Its fine if you disagree with me, but bear in mind that you're basically disagreeing with collective W3C spec authors and what, in my assessment, is industry standard. Additionally its a risky accessibility issue as well. If from a design standpoint you don't like the redundancy, then, sure, that makes sense. Doesn't have to be 100% of the time but it is important to know/be aware of what's considered standard practice. Standard practice exists for a reason, and usually a pretty good one. But it'd be nice if all users could access your site, not just the lucky majority.Penitentiary
More than two years later... we still have this bug.Grillparzer
@CamiloMartin looks like David Catuhe only meant that it would be fixed in Edge, and not IEHire
Looks like IE will never get this fix! It's a feature, not a bug! It's fixed in Edge though!Canaday
And a year later, it still exists.Bobker
M
10

IE developers responded during the AskIE session on twitter IEDevChat that this is a known bug in IE BugList that they will fix in a future version.

Update:- Unfortunately the placeholder behaviour is still the same in IE11, but seems to work in Edge/Spartan versions.

Millimeter answered 20/6, 2014 at 4:10 Comment(2)
A future version does not address the problem in IE10, and this therefore is not an answer to the question.Penitentiary
Thanks @m0sa, dudewad for pointing out. Updated my answer so that it would help others.Millimeter
C
3

There is no good way to make placeholder stay on field focus in IE 10+ but if you are trying to replace labels with placeholders then you should take a look at this.

http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-i-e-float-labels/

It is way to combine placeholders and label to improve user experience.

Clearsighted answered 7/5, 2014 at 16:36 Comment(1)
Link's date, for anyone who stumbles on here todayNullification
B
1

I thought I'd share the workaround I used to sort this issue as it seems IE11 still doesn't have a fix.

In my example - IE11 had added my placeholder value as an actual value within the textarea.

Here's what I had in my template view:

<textarea placeholder="Type your message">
</textarea>

Here's what rendered on the front-end in IE11:

<textarea placeholder="Type your message">
    Type your message
</textarea>

So as the user focused on the field - their cursor was at the end of the '..message here' string - odd!

The workaround for me was to add an initial class to the element on load. Then a basic on 'focus' bind event to check if the class was present - if present, it removes val and then also removes the class. So as soon as the user focuses on the field - the value is reset to an empty string.

Here's the bind event (this particular example was on a dynamically loaded modal - you could simplify this):

$(document).on( "focus", '.textarea', function () {
    if ($(this).hasClass('placeholder-val-present')) {
        $(this).val("").removeClass('placeholder-val-present');
    }
});

This works nicely because when the user tabs out of the field - the placeholder is re-added and it works normally as you'd expect in IE11 and all other browsers.

I'm sure this is quite a niche example - but it may come in handy for others!

Baziotes answered 18/9, 2017 at 19:0 Comment(0)
O
0

The trick is to call focus() and select() both on the input element.

$("#elementId" ).focus();
$("#elementId" ).select();
Orosco answered 21/10, 2019 at 15:1 Comment(0)
T
-3

best solution! work in all browsers

http://jsfiddle.net/q05ngura/3/

document.onkeydown =  function(e) {
	if(!e)e=event;
	var checkVal = Number(this.value.length);
	if((e.keyCode < 112 || e.keyCode > 123) &&  // F1 - F12
	   e.keyCode != 9 &&  // Tab
	   e.keyCode != 20 && // Caps lock
	   e.keyCode != 16 && // Shift
	   e.keyCode != 17 && // Ctrl
	   e.keyCode != 18 && // alt
	   e.keyCode != 91 && // Left window key
	   e.keyCode != 92 && // Right window key
	   e.keyCode != 27 && // Esc
	   e.keyCode != 37 && // Left arrow
	   e.keyCode != 38 && // Up arrow
	   e.keyCode != 39 && // Right arrow
	   e.keyCode != 40 && // Down arrow
	   e.keyCode != 13 && // Enter
	   e.keyCode != 45){ // Insert
	   
	   checkVal = Number(this.value.length) + 1;
	   }
	   
	
	if(e.keyCode == '8'||e.keyCode == '46'){// backspace || delete
	checkVal = Number(this.value.length) - 1;
	}
	if(checkVal > 0){
		this.parentNode.getElementsByTagName('label')[0].style.zIndex = '-1';
	}else{
		this.parentNode.getElementsByTagName('label')[0].style.zIndex = '0';
	}
});
body{
    padding:0;
	margin:0;
    background-color:#ccc;
}
}
::-ms-reveal {
    display: none;
}
input::-ms-clear {
    display: none;
}
label{
	position: absolute;
    right: 60px;
	margin-top: 10px;
    font-size: 13px;
    font-family: sans-serif;
    color: #A9A9A9;
    z-index:0;
	pointer-events: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
label{
	margin-top: -25px;
	right: 57px;
}
}
@-moz-document url-prefix() {
    label{
	right: 69px;
}
}



#login-box{
	position:relative;
	margin:0 auto;
	top:100px;
	background-color:#fff;
	width:270px;
	height:270px;
	border-radius:40px;
}

#login{
	position:relative;
	margin:0 auto;
	text-align:center;
	top:70px;
}
#login input[type="text"],#login input[type="password"]{
	border:none;
	border-bottom:1px solid #CCC;
	padding:9px;
	direction:rtl;
}

*:focus{
	outline:none;
}
<div id="login-box">
            <div id="login">
                    <table align="center" cellpadding="0">
                        <tr>
                            <td>
                                <input type="text" autocomplete="off" name="username" />
                                <label for="username">שם משתמש</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="password" name="password" />
                                <label for="password">סיסמא</label>
                            </td>
                        </tr>
                    </table>
            </div><!-- end login -->
        </div><!-- end login box -->
Terresaterrestrial answered 9/8, 2015 at 11:31 Comment(1)
Doesn't work for latest Chrome: placeholder keeps on showing when typingAldos
Y
-13

I Googled around a bit, and found that there are some CSS pseudo-elements and pseudo-classes that can be used to style placeholders.

input:-ms-input-placeholder:focus{
    color: #999;
}

See this answer for more info: https://stackoverflow.com/a/2610741

Yardarm answered 21/1, 2013 at 20:25 Comment(3)
He didn't ask for how to style the placeholderElsaelsbeth
why are you coloring the placeholder?Gameness
@akagr: I forget, but I think it was to show that you can style the placeholder on focus. Maybe it you colored it, it wouldn't disappear? I forget. I don't have IE 10.Yardarm

© 2022 - 2025 — McMap. All rights reserved.