在 IE8 上 placeholder 无法显示:
左边是IE8的,右边是chrome的
开始用的 placeholder.js (http://download.csdn.net/download/dorothy1224/10015864)插件的方式,但我用的这个插件有小瑕疵,在IE8上,密码框会默认把placeholder提示语变成点点形式:
后自己写了一个插件,完美过渡:
placeholder.min.js (插件中将样式内容合并,可以直接引入一个js。
下载地址:http://download.csdn.net/download/dorothy1224/10016563 ) ,核心代码如下:
function doPlaceHolder(node,plText) {
var clone = $('#'+node).parent().html();
var pl = '<span class="pl-input" id="pl-input-'+node+'">'+plText+'</span>';
$('#'+node).parent().empty().append('<div class="pl-input-wrap">'+clone+pl+'</div>');
var inputNode = $('#'+node);
var plNode = $('#pl-input-'+node);
inputNode.on('focus',function() {
plNode.removeClass("login_input_wrap_prompt");
});
inputNode.on('blur',function() {
if (!inputNode.val()) {
plNode.addClass("login_input_wrap_prompt");
}
});
plNode.on('click',function() {
inputNode.focus();
});
if (inputNode.val()) {
plNode.removeClass("login_input_wrap_prompt");
} else {
plNode.addClass("login_input_wrap_prompt");
}
};
htm调用:
<input id="os_username" type="text" placeholder="请输入您的用户名">
<input id="os_password" type="text" placeholder="请输入您的密码">
<!--[if lt IE 10]>
<script type="text/javascript" src="${CTX_PATH}/system/resource/placeholders/placeholder.js"></script>
<script>
doPlaceHolder('os_username','请输入您的用户名'));
doPlaceHolder('os_password','请输入您的密码'));
</script>
<![endif]-->
.pl-input-wrap{
position: relative;
}
.pl-input{
position: absolute;
left: 0px;
display:none;
}
.login_input_wrap_prompt{
display:inline !important;
}
之后,如果有登录这种操作,还会可能出现自动填充的问题。
其解决方法见:http://blog.csdn.net/Dorothy1224/article/details/78206463
注意:
1. 在html调用时,需放在body后面,在页面被加载之后,否则无法取到页面选择会没有用。
2. 如果是打开modal框,需在页面关闭时,不仅要清除框中的值,同时进行失焦操作(如: $(“#oldPwd”).blur(); ),否则,打开modal框输入后,直接关闭,再次打开会出现placeholder为空的现象。