$.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. codeblocks安装后无法编译

    codeblocks安装后无法编译: 解决办法: 1.下载自带编译器的codeblock安装包. 2.安装完后.修改配置 (1)打开软件,选择setting->Compiler (2)在编译器设 ...

  2. C#中如何设置窗体的默认按钮和取消按钮

    可以直接在窗体的AcceptButton和CancelButton中设置相应的按钮. 也可以在后头通过代码设置: this.AcceptButton = (IButtonControl)btnSave ...

  3. nyoj 93 汉诺塔(三)

    点击打开链接 汉诺塔(三) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...

  4. hcatalog配置

     https://cwiki.apache.org/confluence/display/Hive/HCatalog+CLI hive的配置中添加: export PATH=$PATH:$HIVE ...

  5. HTTP 500 的解决方案

    我们首先要确定IIS权限的问题,如下所示: 身份验证的具体项: 身份验证的基本设置: 注意:如果不需要Form验证的情况下,那么把Form身份验证禁止掉,否则会出现在每一次请求的过程中都要有一个默认的 ...

  6. 通过weka.jar包来进行数据预处理

    前言:注意首先要将weka.jar包加载到相应的路径中去.程序中的数据也是用的weka自带的数据. 扩展:eclipse添加jar包的操作方法: 打开eclipse ,在对应的工程下右击,选择Buil ...

  7. PL/0与Pascal-S编译器程序详细注释

    学校编译课的作业之一,要求阅读两个较为简单的编译器的代码并做注释, 个人感觉是一次挺有意义的锻炼, 将自己的心得分享出来与一同在进步的同学们分享. 今后有时间再做进一步的更新和总结,其中可能有不少错误 ...

  8. oracle创建索引后sqlldr导入错误

    SQL*Loader-: Error calling once/load initialization ORA-: Table TABLE_LOG has index defined upon it. ...

  9. Error querying database. Cause: java.sql.SQLException: ORA-01745: 无效的主机/绑定变量名

    今天调试程序是遇到了,下面的一个问题.我将对应的SQL语句拿到Toad下也能正常的执行,感觉有点莫名其妙,根据异常信息的提示查看对应的映射结果集也没发现错误,然后百度了一下,也有许多朋友也遇到过这样的 ...

  10. SVN中文件属性

    从SVN中checkout代码,然后设置crontab 定时执行脚本,发现permission denied 查看发现脚本没有可执行权限 但是,之前项目中的代码是有该权限的,于是猜想应该可以对SVN中 ...