Input输入字体颜色改变js(兼容IE)
从网上找的代码,自己封装了一下(前提:引用jQuery库)
方法1:
HTML:
<div class="box"> <div class="ipt1" ><input type="text" id="user" value="name" ></div> <div class="ipt2" ><input type="text" id="tel" value="phone"></div> <input type="submit" class="submit" value="确 认"> </div>
javascript:
function InputStyleChange(id,p,c1,c2){ //函数 var placeholder = p; var inputname = id; inputname.onfocus = function(){ if ( this.value == placeholder ) { this.value = ''; this.style.color = c1; } }; inputname.onblur = function(){ if (!this.value) { this.value = placeholder; this.style.color = c2; } }; if (inputname.value == placeholder) { inputname.style.color = c2; } } $(function){ InputStyleChange($('#tel')[0],'phone','#323232','#b4b4b4'); //调用函数 //修改默认显示文字需要与Html表单默认文字对应 }) 结语:经过测试火狐浏览器兼容存在问题。
方法2:
html
<label> <input type="text" class="ipt pws"/></input> <span class="ph-label">密码</span> </label>
css
label{ display: block; position: relative; } .ph-label{ position: absolute; top: 0px; line-height: 52px; left: 1em; font-size: 12px; color: #a1a1a1 }
js
function InputStyleChange(inputs){ inputs.each(function(i,e){ $(e)[0].value="";//清空表单 $(e).bind("focus",function(){ $(e).siblings(".ph-label").hide(); }).bind("blur",function(){ if (!$(e).val()) $(e).siblings(".ph-label").show(); }).siblings(".ph-label").click(function(element){ $(element.target).hide(); $(e).focus(); }) }) } InputStyleChange($('.ipt'));//调用函数
Input输入字体颜色改变js(兼容IE)的更多相关文章
- echarts x轴或y轴文本字体颜色改变
1:x轴文本字体颜色改变 xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-','>=70'], axi ...
- jquery+css 实现即时变化颜色主题(通过input输入颜色值进行改变)
实现效果需要自行导入jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- android自定义控件实现TextView按下后字体颜色改变
今天跟大家分享一下Android自定义控件入门,先介绍一个简单的效果TextView,按下改变字体颜色,后期慢慢扩展更强大的功能 直接看图片 第一张是按下后截的图,功能很简单, ...
- 改变input光标颜色与输入字体颜色不同
设置input css: color #ffd600text-shadow 0px 0px 0px #bababa -webkit-text-fill-color initial input, tex ...
- 列表显示数据 但是数据的字体颜色要js添加
1.需求:数据在前台显示,但是每个条记录的颜色要有点不同 1.java后台数据的处理 String ids=""; for(int x=0;x<sign.size();x++ ...
- RadioGroup 的 RadioButton 选择改变字体颜色和背景颜色
RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...
- iOS改变UIAlertView、UIActionSheet、UIAlertController系统字体颜色
废话不多说,直接上代码,效果是最好的说服力 1.改变UIAlertView字体颜色 [UIView appearance].tintColor = [UIColor greenColor]; 个人还是 ...
- Android RadioGroup的RadioButton 选择改变字体颜色和背景颜色
RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...
- 改变input的placeholder字体颜色
改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...
随机推荐
- js如何关闭当前页,而不弹出提示框
//关闭当前页面,并且打开新页面,(不提示) function closeWinAndOpen(url) { //利用随机数处理WinName var sWinName = "LR" ...
- xml入门简介--两天学会xml
前言 在很久以前,笔者曾见到过1000+页的xml书,里面还有n多的概念,XSL,Xquery,让人头痛.无奈最近需要用到,所以在w3c恶补了一下.以下大致整理了一下相关概念,但是对XSL等派生语言没 ...
- JS中prototype属性-JS原型模式
/* *对象方法 *类方法 * 原型方法 */ function People(name) { this.name = name; this.say = function () { //对象方法 al ...
- html链接
1. <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接.</p><p><a hr ...
- C#线程池ThreadPool的理解
在多线程编程中,线程的创建和销毁是非常消耗系统资源的,因此,C#引入了池的概念,类似的还有数据库连接池,这样,维护一个池,池内维护的一些线程,需要的时候从池中取出来,不需要的时候放回去,这样就避免了重 ...
- 漂亮回答面试官struts2的原理
众所周知,Struts2是个非常优秀的开源框架,我们能用Struts2框架进行开发,同时能快速搭建好一个Struts2框架,但我们是否能把Struts2框架的工作原理用语言表达清楚,你表达的原理不需要 ...
- OpenCV——无法启动此程序,丢失**解决办法
OpenCV程序运行时,有时出现以下错误: 解决方法: 在opencv安装目录下找到这个链接库,将其复制到以下指定目录中 我的链接库目录为:E:\Program files\opencv\build\ ...
- Image的Stride
参看下面链接:http://msdn.microsoft.com/en-us/library/aa473780
- C# ?? 运算符,不能忘记的知识点
最近项目中有一个bug被测试(是黑盒测试)发现了,跟了老半天代码,才找到这个问题的所在,原来是一个计算表达式中用到了??运算符,才导致了这个错误,下面让我简单讲述一下. C# ?? 运算符 msdn上 ...
- 美国政府关于Google公司2013年度的财务报表红头文件
请管理员移至新闻版块,谢谢! 来源:http://www.sec.gov/ 财务报表下载↓ 此文仅作参考分析. 10-K 1 goog2013123110-k.htm FORM 10-K UNIT ...