在 IE10 中将占位符保持在焦点上

Question

在 WebKit 和 Firefox 下，input 的 placeholder 中的文本会一直停留在 focus 上——直到 input.val 中确实包含某些内容时它才会消失。

有没有强制IE10做同样事情的好方法？

Answer 1

Internet Explorer Developer Center 中的:-ms-input-placeholder pseudo-class 文档似乎暗示这是按设计工作的。

占位符文本以指定的样式显示，直到 字段有焦点，表示该字段可以输入。当。。。的时候 字段有焦点，它返回到输入字段的正常样式并且 占位符文本消失。

编辑：如果我必须模仿这种行为，我会查看适用于旧版本的占位符填充库（设置默认值、在输入框上浮动灰色文本等） IE。它们必须进行修改，因为它们可能具有检测占位符功能并遵从浏览器的功能。此外，这会产生“浏览器检测”代码气味。

更新：在 2014 年 6 月 19 日的 Twitter #AskIE 问题会议期间，"IE placeholder text disappears" question 被问及 @IEDevChat responded “我们有一个针对这种行为的活跃错误。下一个版本将提供修复"

Answer 2

IE 开发人员在推特 IEDevChat 上的 AskIE 会话期间回复说，这是 IE BugList 中的 known bug，他们将在未来版本中修复。

更新：- 不幸的是，IE11 中的占位符行为仍然相同，但似乎在 Edge/Spartan 版本中有效。

Answer 3

在 IE 10+ 中没有让占位符保持字段焦点的好方法，但如果您尝试用占位符替换标签，那么您应该看看这个。

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

这是一种结合占位符和标签来改善用户体验的方式。

Answer 4

我想我会分享我用来解决这个问题的解决方法，因为 IE11 似乎仍然没有修复。

在我的示例中 - IE11 已将我的占位符值添加为文本区域中的实际值。

这是我在模板视图中看到的内容：

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

以下是 IE11 前端呈现的内容：

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

所以当用户专注于该字段时 - 他们的光标位于“..message here”字符串的末尾 - 奇怪！

对我来说，解决方法是在加载时向元素添加一个初始类。然后是一个基本的“焦点”绑定事件来检查类是否存在 - 如果存在，它会删除 val 然后也删除该类。因此，只要用户关注该字段 - 该值就会重置为空字符串。

这里是绑定事件（这个特殊的例子是在一个动态加载的模式 - 你可以简化这个）：

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

这很好用，因为当用户跳出该字段时 - 占位符被重新添加，它在 IE11 和所有其他浏览器中正常工作。

我确信这是一个非常小众的例子 - 但它可能会对其他人派上用场！

Answer 5

诀窍是在输入元素上同时调用 focus() 和 select()。

$("#elementId" ).focus();
$("#elementId" ).select();

Answer 6

最佳解决方案！适用于所有浏览器

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

Answer 7

我在 Google 上搜索了一下，发现有一些 CSS 伪元素和伪类可用于设置占位符的样式。

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

有关更多信息，请参阅此答案：https://stackoverflow.com/a/2610741