解决placeholder在IE浏览器不兼容的问题

解决placeholder在IE浏览器不兼容的问题

 

解决方式：加上label标签。（IE显示该标签，其他浏览器不显示。）

 

1.html：

<div class="fl">
	<label id="oldPwdTip">为了您账户安全请修改原始密码</label>
    <input id="oldPwd" class="usertext" type="password" name="userName" placeholder="为了您账户安全请修改原始密码"
    	οnkeypress="hideOldPwdTip();" οnblur="toggleOldPwdTip(this.value);" />
    <span id="oldPwdTip2"></span>
</div>

 

2.样式：（注意float和absolate）

.fl{ float:left; width:350px; margin-left:8px;}
#oldPwdTip{
	position: absolute;
	color : #ccc;
	margin-top : 6px;
	margin-left : 6px;
}

 

3.IE显示label脚本：

$(function(){
	/* IE浏览器的输入框提示 */
	var platform = navigator.platform;
	var o = navigator.appName ;
	if (o.toString().indexOf("Internet") == -1) {
		document.getElementById("oldPwdTip").style.cssText = "display: none;" ;
		document.getElementById("newPwdTip").style.cssText = "display: none;" ;
		document.getElementById("repeatPwdTip").style.cssText = "display: none;" ;
	}
});

 

4.按下键盘不显示，失去焦点重新显示：

function hideOldPwdTip() {
	document.getElementById("oldPwdTip").style.cssText = "display: none;" ;
}

function toggleOldPwdTip(v) {
	if (!v) {
		var o = navigator.appName ;
    	if (o.toString().indexOf("Internet") != -1) {
			document.getElementById("oldPwdTip").style.cssText = "display: block;" ;
    	}
	}
}

 

Chrome：

 

IE：