<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>适配placeholder </title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/**
+ ---------------------------------------- +
+ 适配placeholder
+ Author: zzf
+ Date: 2012-4-5
+ ---------------------------------------- +
**/
jQuery.fn.placeholder = function () {
return this.each(function(){
if ('placeholder' in document.createElement(this.tagName)) return;
var self = this,
placeholder = self.getAttribute('placeholder') || self.getAttribute('value'),
el = jQuery(self);
//如果placeholder和value属性同时存在,以placeholder为准
if (self.value === '' || self.value !== placeholder) {
self.value = placeholder;
}
el.bind({
'focus':function (){
this.value === placeholder && (this.value = '');
},
'blur':function (){
this.value === '' && (this.value = placeholder);
}
})
})
};
//测试
$(document).ready(function (){
$('#test-wrap').find('.demo').placeholder();
})
</script>
<div id="test-wrap">
<input id="" class="demo" type="text" name="" placeholder="text的placeholder" /> <br /><br />
<textarea id="" class="demo" name="" rows="" cols="20" placeholder="textarea的placeholder" ></textarea><br />
</div>
</body>
</html>
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步