input的焦点占位符
这个input的焦点占位符IE6也兼容,,目前所有的浏览器都兼容,不过还有点小BUG ,由于浏览器的展现方式不一样,FF和chrome跟IE的展现方式不一样,下一步还要更改
来源网络~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fds</title>
<script type="text/javascript" src="min-jq.js"></script>
<style>
.placeholder{ color:#ccc !important; }
</style>
<script type="text/javascript">
$(function () {
if (!placeholderSupport()) {
var ph = $('[placeholder]');
ph.each(function () {
var $this = $(this);
$this.val($this.attr("placeholder")).addClass("placeholder");
});
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
});
};
})
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
</script>
</head>
<body>
<form>
<label for="name">输入</label>
<input type="text" placeholder="请输入"/>
<label for="name">密码</label>
<input id="mima" type="password" placeholder="密码"/>
</form>
</body>
</html>