从网上找的代码,自己封装了一下(前提:引用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)的更多相关文章

  1. echarts x轴或y轴文本字体颜色改变

    1:x轴文本字体颜色改变 xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-','>=70'], axi ...

  2. jquery+css 实现即时变化颜色主题(通过input输入颜色值进行改变)

    实现效果需要自行导入jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. android自定义控件实现TextView按下后字体颜色改变

    今天跟大家分享一下Android自定义控件入门,先介绍一个简单的效果TextView,按下改变字体颜色,后期慢慢扩展更强大的功能 直接看图片             第一张是按下后截的图,功能很简单, ...

  4. 改变input光标颜色与输入字体颜色不同

    设置input css: color #ffd600text-shadow 0px 0px 0px #bababa -webkit-text-fill-color initial input, tex ...

  5. 列表显示数据 但是数据的字体颜色要js添加

    1.需求:数据在前台显示,但是每个条记录的颜色要有点不同 1.java后台数据的处理 String ids=""; for(int x=0;x<sign.size();x++ ...

  6. RadioGroup 的 RadioButton 选择改变字体颜色和背景颜色

    RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...

  7. iOS改变UIAlertView、UIActionSheet、UIAlertController系统字体颜色

    废话不多说,直接上代码,效果是最好的说服力 1.改变UIAlertView字体颜色 [UIView appearance].tintColor = [UIColor greenColor]; 个人还是 ...

  8. Android RadioGroup的RadioButton 选择改变字体颜色和背景颜色

    RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...

  9. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

随机推荐

  1. js如何关闭当前页,而不弹出提示框

    //关闭当前页面,并且打开新页面,(不提示) function closeWinAndOpen(url) { //利用随机数处理WinName var sWinName = "LR" ...

  2. xml入门简介--两天学会xml

    前言 在很久以前,笔者曾见到过1000+页的xml书,里面还有n多的概念,XSL,Xquery,让人头痛.无奈最近需要用到,所以在w3c恶补了一下.以下大致整理了一下相关概念,但是对XSL等派生语言没 ...

  3. JS中prototype属性-JS原型模式

    /* *对象方法 *类方法 * 原型方法 */ function People(name) { this.name = name; this.say = function () { //对象方法 al ...

  4. html链接

    1. <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接.</p><p><a hr ...

  5. C#线程池ThreadPool的理解

    在多线程编程中,线程的创建和销毁是非常消耗系统资源的,因此,C#引入了池的概念,类似的还有数据库连接池,这样,维护一个池,池内维护的一些线程,需要的时候从池中取出来,不需要的时候放回去,这样就避免了重 ...

  6. 漂亮回答面试官struts2的原理

    众所周知,Struts2是个非常优秀的开源框架,我们能用Struts2框架进行开发,同时能快速搭建好一个Struts2框架,但我们是否能把Struts2框架的工作原理用语言表达清楚,你表达的原理不需要 ...

  7. OpenCV——无法启动此程序,丢失**解决办法

    OpenCV程序运行时,有时出现以下错误: 解决方法: 在opencv安装目录下找到这个链接库,将其复制到以下指定目录中 我的链接库目录为:E:\Program files\opencv\build\ ...

  8. Image的Stride

    参看下面链接:http://msdn.microsoft.com/en-us/library/aa473780

  9. C# ?? 运算符,不能忘记的知识点

    最近项目中有一个bug被测试(是黑盒测试)发现了,跟了老半天代码,才找到这个问题的所在,原来是一个计算表达式中用到了??运算符,才导致了这个错误,下面让我简单讲述一下. C# ?? 运算符 msdn上 ...

  10. 美国政府关于Google公司2013年度的财务报表红头文件

    请管理员移至新闻版块,谢谢! 来源:http://www.sec.gov/ 财务报表下载↓ 此文仅作参考分析. 10-K 1 goog2013123110-k.htm FORM 10-K   UNIT ...