解决IE不支持placeholder的问题

最新推荐文章于 2024-04-03 22:29:48 发布

小贵子的博客

最新推荐文章于 2024-04-03 22:29:48 发布

阅读量2.1k

点赞数

分类专栏： web前端 css 文章标签： placeholder IE不支持placeholder placeholder兼容IE

本文链接：https://blog.csdn.net/zyg1515330502/article/details/79278019

版权

web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

4 篇文章 1 订阅

订阅专栏

项目中遇到placeholder不支持IE10及IE10以下的问题，试了几种方法，今天整理出来分享给大家，如果有不合适的地方，希望大家提出意见以便改正。

效果如下：

1.第一种办法：使用html新增的属性“data-”来实现的，实现的时候没有用placeholder这个属性，但是可以实现一样的效果。

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>		
		<script src="js/jquery-3.1.1.js"></script>
	</head>

	<body>		
		<div class="">
			<div class="">				
				<ul class="userBox clearfix">
					<li>
						<input type="text" name="" id="" class="name" value=""  data-value="企业名称" />
					</li>
					<li class="clearRight">
						<input type="text" name="" id="" class="sex" value=""  data-value="姓名" />
					</li>
					<li>
						<input type="text" name="" id="" class="phone" value=""  data-value="电话" />
					</li>
					<li class="clearRight">
						<input type="text" name="" id="" class="youxiang" value=""  data-value="邮箱" />
					</li>
				</ul>
				
			</div>
		</div>
		<script>
			$(function() {
				function placeholder(target) {
					$(target).val($(target).attr("data-value")).addClass("input-placeholder");
					$(target).focus(function() {
						if($.trim($(this).val()) == $(this).attr("data-value")) {
							$(this).val("").removeClass("input-placeholder");
						}

					})
					$(target).blur(function() {
						if($.trim($(this).val()) == "" || $.trim($(this).val()) == $(this).attr("data-value")) {
							$(this).val($(target).attr("data-value")).addClass("input-placeholder");
						}
					})
				}
				
				placeholder(".name");
				placeholder(".sex");
				placeholder(".phone");
				placeholder(".youxiang");
			})

		</script>

	</body>

</html>

*{box-sizing: border-box; margin: 0; padding: 0;}
			.fl{float:left;}
			.fr{float:right;}
			.clearfix:after{content:'';display:block;clear:both;visibility:hidden;height:0;}
			.clearfix{zoom:1}
		    .userBox{list-style: none; width: 1200px; margin: 20px auto;}
			.userBox li{float: left; width: 500px; height: 64px; background: #FFFFFF; margin-bottom: 30px; margin-right: 60px; border: 1px solid #999;}
			.userBox li.clearRight{margin-right: 0px;}
			.userBox li input{width: 100%; height: 100%; padding-left: 30px; font-size: 16px; background: #FFFFFF; border: 0px; border: none; }
			
			/*这是兼容各个浏览器的placeholder颜色，也可以设置字体*/
			.userBox li input::input-placeholder{color: #999999;}
			.userBox li input::-webkit-input-placeholder{color: #999999; font-size: 16px;} /* WebKit, Blink, Edge */
			.userBox li input:-moz-placeholder{color: #999999; font-size: 16px;} /* Mozilla Firefox 4 to 18 */
			.userBox li input::-moz-placeholder{color: #999999; font-size: 16px;} /* Mozilla Firefox 19+ */
			.userBox li input:-ms-input-placeholder{color: #999999; font-size: 16px;} /* Internet Explorer 10-11 */		
			
			/*这是修改placeholder默认的颜色*/
			.input-placeholder{color: #999999;}

小贵子的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决IE不支持placeholder的问题

项目中遇到placeholder不支持IE10及IE10以下的问题，试了几种方法，今天整理出来分享给大家，如果有不合适的地方，希望大家提出意见以便改正。效果如下：1.第一种办法：使用html新增的属性“data-”来实现的，实现的时候没有用placeholder这个属性，但是可以实现一样的效果。
复制链接

扫一扫