placeholder是文本框用来提示内容的属性,比如:
<input id="txt" type="text" name="account" placeholder="请输入帐号">
会显示为:
然而IE9不支持此属性,可以使用js来简单模拟placeholder行为。
我的基本思路是为输入框设置value值,并设置字体颜色,根据输入框内容模拟placeholder。
对于密码输入框placeholder属性的实现,我的思路是添加一个普通的文本输入框在密码框的位置,当点击输入框的时候隐藏它,显示原本的密码输入框并设置焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery.js"></script>
<style>
input{
width:170px;
height:15px;
vertical-align: middle;
}
.hint{
color:#666;
}
.hide{
display: none;
}
</style>
</head>
<body>
<form action="" method="get">
文本框:<input id="txt" type="text" name="account" placeholder="请输入帐号">
<hr>
密码框:
<span>
<input id="pwd" type="password" name="password" placeholder="请输入密码"><input id="pwdSpan" type="text" placeholder="请输入密码">
</span>
<button type="submit" onclick="submit()">Submit</button>
</form>
<script>
$(function(){
$("#pwdSpan").hide();
})
</script>
<!--[if lte IE 9]>
<script src="ie.js"></script>
<![endif]-->
</body>
</html>
ie.js:
$(function(){
var txtHolder=$("#txt").attr("placeholder");
var pwdHolder=$("#pwdSpan").attr("placeholder");
$("#txt").val(txtHolder).addClass("hint");
$("#pwdSpan").val(pwdHolder).addClass("hint").show();
$("#pwd").hide();
$("#txt").focus(function(){
if($(this).val() == txtHolder){
$(this).val("").removeClass("hint");
}
}).blur(function(){
if($(this).val().trim() === ""){
$(this).val(txtHolder).addClass("hint");
}
});
$("#pwdSpan").focus(function(){
$(this).css("display", "none");
$("#pwd").show().focus();
})
$("#pwd").blur(function(){
if($("#pwd").val().trim() == ""){
$(this).hide();
$("#pwdSpan").show();
}
})
})
由于Chrome等浏览器本身是支持placeholder属性的,所以需要判断浏览器类型再加载js文件。
IE中文本输入框和密码输入框默认大小略有不同,需要一起定义一下;
而且两个输入框不能显示在横向保持对齐。只要添加vertical-align: middle;
就可以了。
初始状态:
输入一些内容后:
当然这个只停留在了实现,如果能以插件什么的形式展示的话,功能性会更强。