您现在的位置：首页＞行业资讯

如何在IE低版本中兼容HTML5表单属性placeholder属性--中享思途

WEB开发数据提交是必不可少的，为了更友好的用户体验，通常需要给输入框一个默认的提示信息。HTML5技术提供了一个表单属性placeholder专门用于输入框默认提示，但是在IE低版本中根本不兼容。
例如
源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兼容placeholder属性</title>
<style>
*{margin:0px;padding:0px;}
.userid{position:relative;}
input{width:300px;height: 48px;}
</style>
</head>
<body>
<div class="userid">

<input type="text" placeholder="请输入登录账号"/>
</div>
</body>
</html>
显示结果

青岛HTML5培训--中享思途

那如何在IE低版本中兼容HTML表单属性placeholder呢？
解决思路：
判断浏览器是否兼容HTML表单属性placeholder当浏览器不兼容HTML表单属性placeholder时，在输入框上方放一个和输入框一模一样的段落标签<p>。当段落标签<p>被点击时，段落标签隐藏，输入框获得焦点。当输入框失去焦点时，判断输入框内容是否为空，如果没有输入内容或者输入空格，那么显示段落标签，否则段落标签不显示。例如
源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兼容placeholder属性</title>
<style>
*{margin:0px;padding:0px;}
.userid{position:relative;}
input{width:300px;height: 48px;}
.fakeph{
width:300px;height: 48px;/*设置和输入框一样大小的段落区域*/
position:absolute;/*设置定位，方便段落显示在输入框上方*/
background-color: #ffffff;/*与输入框背景色保持一致*/
line-height: 48px;/*让文字垂直居中*/
border:1px solid #000000;/*设置和输入框一样的边框*/
/*左上角与输入框重复*/
top:0px;
left: 0px;
}
</style>
</head>
<script src="jquery-1.12.0.js"></script>
<body>
<div class="userid">

<input type="text" placeholder="请输入登录账号"/>
</div>
<script>
/*判断浏览器是否兼容placeholder属性*/
function isSupportPlaceholder(){
var input=document.createElement("input");
return "placeholder" in input;
}
if(!isSupportPlaceholder()){//不兼容placeholder属性
var ptext=$("<p></p>");//创建段落标签
var phtext=$("input").attr("placeholder");//获取输入框placeholder属性值
ptext.text(phtext);//为段落设置文本，文本值为输入框的placeholder属性值
ptext.addClass("fakeph");//为段落设置样式
$(".userid").append(ptext);
ptext.click(function(){//段落点击事件
$(this).hide();//段落隐藏
$("input").focus();//输入框获取焦点
})
$("input").blur(function(){//输入框失去焦点事件
var value=$(this).val();//获取输入框输入的值
if($.trim(value)==""){//如果没有输入或输入空格
ptext.show();
}
})
}
</script>
</body>
</html>
显示结果