Question

在WebKit和Firefox下，input的{{1}}中的文字会在placeholder上粘贴 - 在focus实际上有内容之前它不会消失。

有没有一种方法可以强迫IE10做同样的事情？

Answer 1

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

占位符文本以指定的样式显示，直到 field具有焦点，意味着可以输入字段。当。。。的时候字段具有焦点，它返回到输入字段的正常样式和占位符文本消失。

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

更新：2014年6月19日的Twitter "IE placeholder text disappears" question问题会话期间#AskIE和@IEDevChat responded已询问{{3}}“我们有此行为的活动错误。下一个版本将提供修复“

Answer 2

IE开发者在Twitter AskIE的IEDevChat会话期间回复说，这是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中添加了我的占位符值作为实际值。

以下是我在模板视图中的内容：

<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（）。

f7ad f7ad f7ad f7b5 f7ad f7ad d7ad d7a5
b6a5 b6a5 b6a5 969d 969d 969d 959d 759d
759d 759d 759d 759d 759d 759d 969d 969d

Answer 6

最佳解决方案！在所有浏览器中工作

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

＆＃13;

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';
	}
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

我google了一下，发现有一些CSS伪元素和伪类可以用来设置占位符样式。

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

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

在IE10中保持占位符的重点

7 个答案: