placeholder插件及placeholder默认颜色修改
2024-08-24 08:58:29
$.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)
最新文章
- C# 抽象类abstract
- ExtJs4.1中给列表的单元格设置颜色
- C语言语法之关键字
- (七)DAC0832 数模转换芯片的应用 以及运算放大器的学习 01
- js判断手机连接网络类型
- jqery筛选
- Bootstrap的aria-label与aria-labelledby
- MySql Sql 优化技巧分享
- 使用Bootstrap + Vue.js实现 添加删除数据
- Hive内置数据类型
- .NET Core 2.0迁移技巧之web.config配置文件
- project 2013 工时完成百分比不会自动更新填充
- js里添加的标签
- Multiplication of numbers
- day_6.20动态加载py文件
- 关于sql注入的简要演示
- PHP在foreach中对$value赋值无效,应该用 ‘键’ 或者 &;$value的形式
- AvalonEdit-基于WPF的代码显示控件
- ES集群Master节点配置问题
- 如何在vue &;&; webpack 项目中的单文件组件中引入css
热门文章
- Java序列化,serializable
- Java基础-绘图技术
- [ASP.NET]ASP.NET数据绑定菜单控件
- asp.net 自定义文本框
- [原]iptables的NAT策略
- Redis数据持久化之RDB持久化
- Codeforces Round #219 (Div. 1) C. Watching Fireworks is Fun
- Django中级篇(下)
- 《锋利的jQuery》
- HP Mobile Center 1.01 Related System Requirements