让占位符集中在IE10中
在WebKit和Firefox下， input的placeholder的文本在focus不变，直到input.val实际上有一些内容才会消失。
有没有一种强制IE10做同样的事情的好方法？
来自Internet Explorer开发人员中心的 -ms-input-placeholder伪类文档似乎暗示这是按照devise工作的。
占位符文本以指定的样式显示，直到该字段具有焦点，这意味着可以键入该字段。 当该字段具有焦点时，它将返回到input字段的正常样式，占位符文本消失。
编辑：如果我不得不模仿这种行为，我会查看占位符polyfill库（设置默认值，在input框上浮动灰色文本，等），与旧版本的IE工作。 他们将不得不被修改，因为他们可能检测占位符的能力，并遵循浏览器。 此外，这将有一个“浏览器检测”的代码味道。
更新：在2014年6月19日的一个Twitter ＃AskIE问题会议期间询问了一个“IE占位符文本消失”的问题 ，而@IEDevChat 回答说： “我们对此行为有一个积极的错误，下一个版本将提供修复”
IE开发者在Twitter上的AskIE会议上回应IEDevChat ，这是IE BugList中的一个已知错误 ，他们将在未来的版本中修复。
更新： – 不幸的是IE11中的占位符行为仍然是一样的，但似乎在Edge / Spartan版本中工作。
在IE 10+中，没有什么好方法可以让占位符保持在字段焦点上，但是如果你试图用占位符代替标签，那么你应该看看这个。
http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-ie-float-labels/
这是结合占位符和标签来改善用户体验的方法。
我想我会分享我用来解决这个问题的解决方法，因为它似乎IE11仍然没有修复。
在我的例子中 – IE11已经将我的占位符值添加为textarea中的实际值。
以下是我在模板视图中的内容：
<textarea placeholder="Type your message"> </textarea>
以下是在IE11前端渲染的内容：
<textarea placeholder="Type your message"> Type your message </textarea>
所以当用户把注意力放在这个字段上的时候 – 他们的光标在'..message here'string的末尾 – 奇怪！
对我来说，解决方法是在加载的元素上添加一个初始类。 然后一个基本的“焦点”绑定事件来检查类是否存在 – 如果存在，它删除val，然后也删除类。 所以只要用户把注意力集中在这个字段上，这个值就会重置为一个空string。
这里是绑定事件（这个特定的例子是在一个dynamic加载的模式 – 你可以简化这个）：
$(document).on( "focus", '.textarea', function () { if ($(this).hasClass('placeholder-val-present')) { $(this).val("").removeClass('placeholder-val-present'); } });
这很好，因为当用户退出该字段 – 占位符被重新添加，它正常工作，如你所期望在IE11和所有其他浏览器。
我相信这是一个相当有用的例子 – 但它可能派上用场。
最佳解决scheme 在所有浏览器中工作
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 -->
我search了一下，发现有一些CSS伪元素和伪类可以用来设置占位符的样式。
input:-ms-input-placeholder:focus{ color: #999; }
请参阅此答案以获取更多信息： https ： //stackoverflow.com/a/2610741
