在ie中实现placeholder属性（其实主要针对ie8,9）

在ie中实现placeholder属性，一般有两种方法：
一种是在该input下方创建一个div，上面显示placeholder的值，利用绝对位置和相对位置，覆盖在input上方，使其看上去如同有了placeholder属性一样，好处是和input框是分开的，提交校验时不需要特殊处理。坏处是样式可能多变，没法做到统一。
还有一种是利用input中value属性，使value = placeholder的值并使该文字样式符合placeholder的样式，焦点移入时清空input的值，并改变文字的样式。坏处是提交校验时需要特殊处理，判断是输入的值还是假的placeholder。好处是不用应对多变的样式问题。
以上两种方法都行，怎么选择我感觉就是看你是系统做了大半时才考虑到这个问题的还是刚开始就考虑到这个问题。如果做了大半了，要改之前的校验比较困难，所以只能第一种了。如果是刚开始，我还是建议用第2种的。
transparent属性用来指定全透明色彩
代码走起
第一种：

//placeHolder1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>placeholderOfIE</title>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/placeholderOfIE.js"></script>
		<style>
			.iePlaceholder{white-space: nowrap;overflow: hidden;position: absolute;z-index: 2;color: #999;top: 0px;font-size: 12px;padding-left: 6px;}
		</style>
	</head>
	<body>
		<input id="aaaa" type="text" placeholder="请输入标题">
	</body>
</html>

/*需引入jquery*/
$(function(){
	if(!('placeholder' in document.createElement('input'))){
		$('[placeholder]').each(function(){
			var _this = $(this);
			var parentObj = _this.parent();
			var existFlag = false;
			if(parentObj.find(".iePlaceholder").length == 0){ //没有加过模拟placeholder
				var placeholderVal = _this.attr("placeholder")
				_this.wrap('<div style="position:relative;line-height:36px;"></div>');
				_this.after('<div class="iePlaceholder">'+placeholderVal+'</div>');
				existFlag = true;
			}
			if(_this.val() == ''){
				_this.parent().find(".iePlaceholder").show();
			}else{
				_this.parent().find(".iePlaceholder").hide();
			}
			if(existFlag){
				//给input绑定事件
				_this.on("focus",function(){
					if($(this).val() == ''){
						$(this).parent().find(".iePlaceholder").show();
					}else{
						$(this).parent().find(".iePlaceholder").hide();
					}
				}).on("blur",function(){
					if($(this).val() == ''){
						$(this).parent().find(".iePlaceholder").show();
					}else{
						$(this).parent().find(".iePlaceholder").hide();
					}
				}).on("input propertychange",function(){ 
					//在ie9中 js赋值不触发该事件，这就导致了每次js赋值后都重新调用该方法
					if($(this).val() == ''){
						$(this).parent().find(".iePlaceholder").show();
					}else{
						$(this).parent().find(".iePlaceholder").hide();
					}
				})
				//给placeholder div绑定事件
				_this.parent().find(".iePlaceholder").on("click",function(){
					$(this).hide();
					$(this).siblings("input[placeholder]").trigger("click");
					$(this).siblings("input[placeholder]").trigger("focus");
				});
			}
		});
	}
});

第二种：

$(function(){
	placeholderOfIE();
});

function placeholderOfIE(){
		if(!('placeholder' in document.createElement('input'))){
		$('[placeholder]').each(function(){
			var _this = $(this);
			var placeHolderVal = _this.attr("placeholder");
			var className = _this.attr("class");
			if(className == null || className == "" || className.indexOf("placeholderFlag") < 0){
				if(_this.val() == ""){
					_this.addClass("placeholderFlag iePlaceholder");
					_this.val(placeHolderVal);
				}else{
					if(!isEmpty(_this)){
						_this.removeClass("iePlaceholder");
					}
				}
				//给input绑定事件
				_this.on("focus",function(){
					if(isEmpty(_this)){
						_this.removeClass("iePlaceholder");
						_this.val("");
						/*setTimeout(function() {
	                        // 光标定位到首位
	                        _this.setCursorPosition({index: 0})
	                    }, 10)*/
					}
				}).on("blur",function(){
					if(_this.val() == ""){
						_this.addClass("iePlaceholder");
						_this.val(placeHolderVal);
					}
				}).on("keydown",function(){ 
					/*if(isEmpty(_this)){
						_this.removeClass("iePlaceholder");
						_this.val("");
					}*/
				})
			}else{
				if(_this.val() == ""){
					_this.addClass("iePlaceholder");
					_this.val(placeHolderVal);
				}else{
					if(!isEmpty(_this)){
						_this.removeClass("iePlaceholder");
					}
				}
			}
		});
	}
}

//判断该输入框是否为空
function isEmpty(obj){
	var color = obj.css("color");
	var placeHolderVal = obj.attr("placeholder");
	if(color == "#999" && obj.val() == placeHolderVal){
		return true;
	}else{
		return false;
	}
}

原文链接：https://blog.csdn.net/weixin_44805156/article/details/89976107