$.fn.placeHolder = function(){
     $(this).each(function(i, el) {
         var self = $(el);
         if ($.browser.msie && !("placeholder" in $("<input/>")[0])) {
             if(self.attr("data-placeHolder")||!self.attr("placeholder")){
                 return;
             }
             self.attr("data-placeHolder",true);
             var that = $("<div/>");
             var parent = self.parent();
             if(parent.css("position")!=="absolute"&&parent.css("position")!=="fixed"){
                 parent.css("position", "relative");
             }
             that.css({
                 "left": self.offset().left - parent.offset().left + parseInt(self.css("borderLeftWidth")),
                 "top": self.offset().top - parent.offset().top + parseInt(self.css("borderTopWidth")),
                 "width":self.width(),
                 "height":self.height(),
                 "lineHeight":self.css("lineHeight"),
                 "fontSize":self.css("fontSize"),
                 "paddingLeft":self.css("paddingLeft"),
                 "paddingTop":self.css("paddingTop"),
                 "textIndent":self.css("textIndent"),
                 "position":"absolute",
                 "color":"#666669",
                 "outline":"none!important",
                 "border":"none!important",
                 "backgroundColor":"transparent",
                 "cursor": "text"
             });
             that.html(self.attr("placeholder"));
             parent.append(that);
             that.on("click", function() {
                 self[0].focus();
             });
             function showPlaceholder() {
                 if (self.val() === "") {
                     that.show()
                 } else {
                     that.hide();
                 }
             }
             self.on("input propertychange", showPlaceholder);
             showPlaceholder();
         }
     });
 };

 $(function() {
     $("[placeholder]").placeHolder();
 });

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

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

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

placeholder插件及placeholder默认颜色修改的更多相关文章

  1. IE10以下兼容H5中的placeholder 以及改变它默认颜色

    placeholder是H5<input>的属性之一,可惜在IE10以下不支持,万恶的IE!不过正因为有IE,才多了很多捣鼓,添了乐趣.不支持就不支持呗,自己动手丰衣足食,我们可以用js模 ...

  2. input,select默认颜色修改

    input::-webkit-input-placeholder{color: #7f7f7f;} select{color: #7f7f7f} option{color: #7f7f7f;}

  3. 修改输入框placeholder文字默认颜色-webkit-input-placeholder

    html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder=" ...

  4. 【css】修改placeholder 默认颜色

    html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder=" ...

  5. HTML5 input placeholder 颜色修改示例

    Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...

  6. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  7. input的placeholder文字颜色修改

    input::-webkit-input-placeholder { color: #D6D0CA !important; /* WebKit browsers / } input:-moz-plac ...

  8. css3 input placeholder颜色修改方法

    css3 input placeholder颜色修改方法<pre> input::-webkit-input-placeholder { /* placeholder颜色 */ color ...

  9. input placeholder 文字颜色修改

    placeholder 文字颜色修改 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozill ...

随机推荐

  1. Awk 实例

    AWK 是一种用于处理文本的编程语言工具.AWK 在很多方面类似于 shell 编程语言,尽管 AWK 具有完全属于其本身的语法.它的设计思想来源于 SNOBOL4 .sed .Marc Rochki ...

  2. EF下CodeFirst、DBFirst与ModelFirst分析

    EF4.1有三种方式来进行数据操作及持久化.分别是Database-First,Model-First,Code-first:1.Database First是基于已存在的数据库,利用某些工具(如Vs ...

  3. ruby字符串学习笔记5

    1获取字符串某部分 s = "My kingdom for a string!" s.slice(3,7) # kingdom s[3,7] # kingdom s[/.ing/] ...

  4. 《c++程序设计》笔记

    本文是学习谭浩强老师的<c++程序设计>后的笔记. 1.概述 c++是贝尔实验室在c语言的基础上发展而来,与c兼容.用c语言写的程序可以不加修改用于c++.从c++的名字可以看出它是c的超 ...

  5. sql server 与oracle数据互导的一种思路--sql server链接服务器

    思路:通过在sql server数据库中添加链接服务器,可以远程查询oracle数据库的表环境准备,安装sql server数据库,并安装好oracle驱动,在配置好tnsname文件中配置好orac ...

  6. 立体匹配:关于Middlebury提供的源码的简化使用

    Middlebury提供的源码,虽然花了不到一个小时就运行起来啦.但说实话,它那循环读取脚本命令来执行算法真是让我费了不少头脑,花了近三天时间,我才弄明白了它的运行机制.你说,我就想提取一下算法,你给 ...

  7. HDU 5808[数位dp]

    /* 题意: 给你l和r,范围9e18,求l到r闭区间有多少个数字满足,连续的奇数的个数都为偶数,连续的偶数的个数都为奇数. 例如33433符合要求,44不符合要求.不能含有前导零. 思路: 队友说是 ...

  8. [HDU 3033] I love sneakers! (动态规划分组背包)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3033 题意:给你K种品牌,每种品牌有不同种鞋,现在每种品牌至少挑一款鞋,问获得的最大价值,如果不能每种 ...

  9. python3 AttributeError: 'NoneType' object has no attribute 'split'

    from wsgiref.simple_server import make_server def RunServer(environ, start_response): start_response ...

  10. CentOS内核编译

    From: http://blog.csdn.net/lchengcome/article/details/6715591From: http://bbs.chinaunix.net/thread-3 ...