placeholder插件及placeholder默认颜色修改

 1 $.fn.placeHolder = function(){
 2     $(this).each(function(i, el) {
 3         var self = $(el);
 4         if ($.browser.msie && !("placeholder" in $("<input/>")[0])) {
 5             if(self.attr("data-placeHolder")||!self.attr("placeholder")){
 6                 return;
 7             }
 8             self.attr("data-placeHolder",true);
 9             var that = $("<div/>");
10             var parent = self.parent();
11             if(parent.css("position")!=="absolute"&&parent.css("position")!=="fixed"){
12                 parent.css("position", "relative");
13             }
14             that.css({
15                 "left": self.offset().left - parent.offset().left + parseInt(self.css("borderLeftWidth")),
16                 "top": self.offset().top - parent.offset().top + parseInt(self.css("borderTopWidth")),
17                 "width":self.width(),
18                 "height":self.height(),
19                 "lineHeight":self.css("lineHeight"),
20                 "fontSize":self.css("fontSize"),
21                 "paddingLeft":self.css("paddingLeft"),
22                 "paddingTop":self.css("paddingTop"),
23                 "textIndent":self.css("textIndent"),
24                 "position":"absolute",
25                 "color":"#666669",
26                 "outline":"none!important",
27                 "border":"none!important",
28                 "backgroundColor":"transparent",
29                 "cursor": "text"
30             });
31             that.html(self.attr("placeholder"));
32             parent.append(that);
33             that.on("click", function() {
34                 self[0].focus();
35             });
36             function showPlaceholder() {
37                 if (self.val() === "") {
38                     that.show()
39                 } else {
40                     that.hide();
41                 }
42             }
43             self.on("input propertychange", showPlaceholder);
44             showPlaceholder();
45         }
46     });
47 };
48
49 $(function() {
50     $("[placeholder]").placeHolder();
51 });

改变placeholder的默认颜色代码如下：

::-moz-placeholder{color:red;}                   //ff
::-webkit-input-placeholder{color:red;}     //chrome,safari
:-ms-input-placeholder{color:red;}             //ie10

Placeholder插件在支持自带placeholder的浏览器原样显示不处理，低版本在同级创建div。（记得引入jQuery）