Javascript 在 IE10 中保持占位符的焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14445891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
keep placeholder on focus in IE10
提问by Aaron Yodaiken
Under WebKit and Firefox, the text in a input's placeholdersticks around on focus—it doesn't disappear until input.valactually has something in it.
在WebKit和火狐，在文本input的placeholder棒周围focus-它并没有消失，直到input.val真正拥有它的东西。
Is there a good way to force IE10 to do the same thing?
有没有一种好方法可以强制 IE10 做同样的事情？
回答by Kevin Hakanson
The :-ms-input-placeholder pseudo-classdocumentation from the Internet Explorer Developer Centerseems to imply this is working as designed.
来自Internet Explorer 开发人员中心的:-ms-input-placeholder 伪类文档似乎暗示这是按设计工作的。
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.
编辑：如果我必须模仿这种行为，我会看看占位符 polyfill 库（设置默认值，在输入框上浮动灰色文本等），它适用于旧版本的 IE。它们必须进行修改，因为它们可能具有检测占位符功能并遵循浏览器的功能。此外，这会有“浏览器检测”代码味道。
Update:An "IE placeholder text disappears" questionwas asked during a Twitter #AskIEquestion session on June 19, 2014 and @IEDevChatresponded"We have an active bug for this behavior. Next version will provide a fix"
更新：一个“IE占位符文本消失”的问题是一个Twitter时问#AskIE2014年6月19日，问题会议，并@IEDevChat回答：“我们有一个活跃的错误这种行为下一个版本将提供一个补丁。”
回答by Vivek Pratap Singh
IE developers responded during the AskIEsession on twitter IEDevChatthat this is a known bugin IE BugList that they will fix in a future version.
IE 开发人员在Twitter IEDevChat上的AskIE会话期间回应说，这是IE BugList 中的一个已知错误，他们将在未来版本中修复。
Update:- Unfortunately the placeholder behaviour is still the same in IE11, but seems to work in Edge/Spartan versions.
更新：-不幸的是，占位符行为在 IE11 中仍然相同，但似乎适用于 Edge/Spartan 版本。
回答by Mike Starov
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.
在 IE 10+ 中没有让占位符保持在字段焦点上的好方法，但是如果您尝试用占位符替换标签，那么您应该看看这个。
http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-i-e-float-labels/
http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-ie-float-labels/
It is way to combine placeholders and label to improve user experience.
这是一种结合占位符和标签来改善用户体验的方法。
回答by James
I thought I'd share the workaround I used to sort this issue as it seems IE11 still doesn't have a fix.
我想我会分享我用来解决这个问题的解决方法，因为 IE11 似乎仍然没有修复。
In my example - IE11 had added my placeholder value as an actual value within the textarea.
在我的示例中 - IE11 已将我的占位符值添加为 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:
这是在 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!
因此，当用户专注于该字段时 - 他们的光标位于 '..message here' 字符串的末尾 - 很奇怪！
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.
我的解决方法是在加载时向元素添加一个初始类。然后一个基本的“焦点”绑定事件来检查类是否存在 - 如果存在，它会删除 val 然后也删除类。因此，只要用户关注该字段 - 该值就会重置为空字符串。
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.
这很有效，因为当用户退出该字段时 - 重新添加占位符，并且它可以像您在 IE11 和所有其他浏览器中期望的那样正常工作。
I'm sure this is quite a niche example - but it may come in handy for others!
我敢肯定这是一个非常小众的例子 - 但它可能对其他人有用！
回答by Ε Г И ? И О
The trick is to call focus() and select() both on the input element.
诀窍是在输入元素上调用 focus() 和 select() 。
$("#elementId" ).focus();
$("#elementId" ).select();
回答by Big mike
best solution! work in all browsers
最佳解决方案！在所有浏览器中工作
http://jsfiddle.net/q05ngura/3/
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 -->回答by Rocket Hazmat
I Googled around a bit, and found that there are some CSS pseudo-elements and pseudo-classes that can be used to style placeholders.
我在谷歌上搜索了一下，发现有一些 CSS 伪元素和伪类可用于设置占位符的样式。
input:-ms-input-placeholder:focus{
color: #999;
}
See this answer for more info: https://stackoverflow.com/a/2610741
有关更多信息，请参阅此答案：https: //stackoverflow.com/a/2610741
