66

在 WebKit 和 Firefox 下， ' 中的文本会input一直存在——它不会消失，直到它里面确实有东西。placeholderfocusinput.val

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

4

7 回答 7

45

来自Internet Explorer 开发人员中心的:-ms-input-placeholder 伪类文档似乎暗示这是按设计工作的。

占位符文本以指定的样式显示，直到该字段具有焦点，这意味着可以键入该字段。当该字段具有焦点时，它会恢复为输入字段的正常样式，并且占位符文本会消失。

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

更新：在 2014 年 6 月 19 日的 Twitter #AskIE问题会议期间提出 了“IE 占位符文本消失”问题， @IEDevChat回复“我们对此行为有一个活跃的错误。下一个版本将提供修复”

于 2013-04-22T02:20:00.337 回答
10

IE 开发人员在Twitter IEDevChat上的AskIE会话期间回应说，这是 IE BugList 中的一个已知错误，他们将在未来的版本中修复。

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

于 2014-06-20T04:10:13.647 回答
3

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

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

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

于 2014-05-07T16:36:38.080 回答
1

我想我会分享我用来解决这个问题的解决方法，因为 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 和所有其他浏览器中所期望的那样。

我敢肯定这是一个非常小众的例子——但它可能对其他人有用！

于 2017-09-18T19:00:40.420 回答
0

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

$("#elementId" ).focus();
$("#elementId" ).select();
于 2019-10-21T15:01:39.603 回答
-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 -->

于 2015-08-09T11:31:30.633 回答
-13

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

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

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

于 2013-01-21T20:25:27.453 回答