IE 8 瀏覽器 placeholder 兼容性處理

時間 2019-11-07

原文原文鏈接

寫在前面

因爲公司的產品須要兼容 IE8 瀏覽器，在作登錄時，發現一個問題，placeholder 在input = text 狀況下，顯示還算正常，但在 input = password 就變成了兩個點，百度，gg不少，有的是經過lable 模擬，另外還有經過定位模擬，發現都不能很好地解決password 爲點的問題。通過不斷的嘗試和參考別的產品在 IE 8 下兼容處理。我整理下，具體見下：javascript

兼容處理

經過處理input focus時和 blur 時來控制文本的顯示和隱藏。其中關鍵的時 input {background: none;} 和 z-index。 z-index 在父子元素中生效，須要在父級元素設置 position: relativecss

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<style type="text/css">
		body {
		    font-family: Arial, Helvetica, sans-serif;
		    font-size: 12px;
		    background: #fff;
		    z-index: 1;
		}
		input {background: none;}
		.box {
			height: 300px;
			width: 300px;
			background: #f2f2f2;
			margin: 0 auto;
			padding-top: 20px;
		}
		.child {
			position: relative;
			margin: 20px;
			z-index: 2;
			border: 1px solid #ccc;
		    height: 35px;
		    background: #fff;
		}
		.ds-input {
			border: none medium;
		    font-family: verdana;
		    ime-mode: disabled;
		    width: 243px;
		    height: 21px;
		    line-height: 21px;
		    color: #bebebe;
		    font-size: 14px;
		    position: absolute;
		    top: 0px;
		    left: 5px;
		    padding: 7px 0;
		    outline: none;
		}
		.tips {
			position: absolute;
		    z-index: -999;
		    top: 2px;
		    _top: 4px;
		    left: 5px;
		    color: #C3C3C3;
		    font-size: 14px;
		    line-height: 33px;
		    visibility: visible;
		    cursor: text;
		    padding-left: 4px;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$("input").focus(function(){
				console.log(111)
				var id = "#tip_"+this.id;
				$(id).hide();
			});
			$("input").blur(function(){
				console.log(222)
				var id = "#tip_"+this.id;
				if(this.value=="")
				{
					$(id).show();
				}
			});
		});

	</script>
</head>
<body>
	<div class="box">
		<div class="child">
			<input type="text" class="ds-input" id="username" autocomplete="off">
			<span class="tips" id="tip_username">手機號/郵箱</span>
		</div>
		<div class="child">
			<input type="password" class="ds-input" id="password" autocomplete="off">
			<span class="tips" id="tip_password">密碼</span>
		</div>
	</div>
</body>
</html>
複製代碼