这个功能已成为HTML5的一部分了。但5之前的版本还要自己实现
网页部分(应用部分):
<html>
<head>
<title></title>
<script type="text/javascript" src="../jslib/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../js/placeholder.js"></script>
</head>
<body>
<input placeholder="placeholder here" type="text">
<input placeholder="placeholder here" type="text">
<input placeholder="placeholder here" type="text">
<input type="text" value="no placeholder">
</body>
</html>
placeholder的值为要显示的值
Javascript部分(实现部分):
// placeholder.js
$(document).ready(
function() {
var placeholderCss = '<style media="screen" type="text/css">'
+ '.placeholder { color: #a1a1a1; font-style: italic; }'
+ '</style>';
$("head").append(placeholderCss);
trgoofi.placeholder("placeholder", "placeholder");
});
(function() {
var trgoofi = {
// placeholderClassName: class name that define the css to control the style
// attributeName: attribute name in the input field
placeholder : function(placeholderClassName, attributeName) {
$("input").each(function() {
var $this = $(this);
if ($this.attr(attributeName) != undefined) {
// deactivate placeholder
$this.focus(function() {
if ($this.val() == $this.attr(attributeName)) {
$this.removeClass(placeholderClassName);
$this.val("");
}
});
// activate placeholder
$this.blur(function() {
if ($this.val() == "") {
$this.addClass(placeholderClassName);
$this.val($this.attr(attributeName));
}
});
// initialize placeholder
$this.blur();
}
});
}
};
window.trgoofi = trgoofi;
})();