(function($) {
$.fn.PlaceHolder = function(className) {
var _set = function($em, opt) {
for (i in opt) {
switch(i) {
case 'value': $em.val(opt[i]); break;
case 'class':
if (opt[i].length) {
$em.toggleClass(opt[i]);
}
break;
default: $em.attr(i, opt[i]);
}
}
};
if ('placeholder' in $('<input />')[0]) {
return this;
}
return this.each(function() {
var $this = $(this),
init = {
'type': $this.attr('type'),
'placeholder': $this.attr('placeholder')
};
$this.bind({
'init': function(){
_set($(this), {
'type': init.type,
'class': className ? className : '',
'value': ''
});
},
'opts': function() {
_set($(this), {
'type': 'text',
'class': className ? className : '',
'value': init.placeholder
});
},
'focus': function() {
var $this = $(this);
if ($this.val() == init.placeholder) {
$this.trigger('init');
}
},
'blur': function() {
var $this = $(this);
if ($this.val() == '') {
$this.trigger('opts');
}
}
});
if (init.placeholder && $this[0].value != undefined) {
$this.trigger('blur');
}
});
};
})(jQuery);
<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/my.js" type="text/javascript"></script>
<style type="text/css">
.abc{
color: #aca9a9;
padding: 3px;
}
</style>
<script type="text/javascript">
$(function() {
$('#tmp').PlaceHolder('abc');
})
</script>
</head>
<body>
<input placeholder="测试一下" id="tmp"/>
</body>
</html>