1、什么是placeholder?

   placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。
   写法如下:
  
 
 
2、placeholder的浏览器兼容性和在不同浏览器下的表现
   由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。
    下面是其在各个浏览器下的显示效果:
     firefox:
     
     chrome:
     
     safari:
     
     ie10:
     
   可以看出,placeholder的文字在各个浏览器下基本都是淡灰色显示。

     不同的地方在于,在ff和chrome下,输入框获得焦点时,placeholder文字没有变化,只有当输入框中输入了内容时,placeholder文字才消失;而在safari和ie10下,当输入框获得焦点时,placeholder文字便立即消失。
     默认情况下,placeholder的文字是灰色,输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么,如何修改placeholder的色值呢?
     如果直接写input{color:red;},可以看到,ie10和ff下,placeholder文字和输入文字都变成了红色,如下:
     ff:
     
      ie10:
      

而在chrome和safari下,placeholder文字颜色不变,只有输入的文字变成红色。

       显然,这种做法是行不通的。因为我们只想改变placeholder文字的颜色,并不想改变输入文字的颜色。
正确的写法如下:
    ::-moz-placeholder{color:red;}              //ff
    ::-webkit-input-placeholder{color:red;}     //chrome,safari
    :-ms-input-placeholder{color:red;}          //ie10
    
3、如何使placeholder兼容所有浏览器
     前面我们知道了,ie6到ie9并不支持原生的placeholder,并且即使在支持原生placeholder的浏览器上,其表现也并不一致。在实际项目中,如何使所有浏览器都一致地支持placeholder呢?
    (1)如果只需要让不支持placeholder的浏览器能够支持改功能,并不要求支持原生placeholder的浏览器表现一致,那么可以采用如下方法:
    function placeholder(nodes,pcolor) {
      if(nodes.length && !("placeholder" in document_createElement_x("input"))){
          for(i=0;i
              var self = nodes[i],
                  placeholder = self.getAttribute('placeholder') || '';     
              self.onfocus = function(){
                  if(self.value == placeholder){
                     self.value = '';
                     self.style.color = "";
                  }               
              }
              self.onblur = function(){
                  if(self.value == ''){
                      self.value = placeholder;
                      self.style.color = pcolor;
                  }              
              }                                       
              self.value = placeholder;  
              self.style.color = pcolor;              
          }
      }
    }    
    (2)如果需要自定义样式,并且希望placeholder在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label。
     或者是在input上应用背景图片,获得和失去焦点的时候切换背景图片是否显示。
     实现方法有很多种,欢迎大家各抒已见。  

placeholder在不同浏览器下的表现及兼容方法的更多相关文章

  1. placeholder在不同浏览器下的表现及兼容方法(转)

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  2. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  3. chrome浏览器下的xdebug helper使用方法

    chrome浏览器下的xdebug helper使用方法     自从安装了xdebug后,发现每次调试都需要从eclipse中先从头启动,然后一步步走到你要调试的页面,而不是说想什么时候调试就什么时 ...

  4. IE浏览器下常见的CSS兼容问题

    目录 [1]宽高bug [2]边框bug [3]盒模型bug[4]列表项bug [5]浮动bug [6]定位bug [7]表单bug 宽高bug [1]IE6-浏览器下子元素能撑开父级设置好的宽高 & ...

  5. 关于js的parseInt方式在不同浏览器下的表现

    今天开发期间遇到个需求要把日期格式转换成毫秒数 日期为:2015-08-10 split之后使用parseInt将2015,08,10分别转化为数字格式. 但是使用parseInt('08')的时候却 ...

  6. IE6,IE7浏览器下 margin 无效的解决方法

    今天有时间,所以特意做了一个测试. 复制代码 代码如下: <style type="text/css"> .test-1,.test-2{border:5px soli ...

  7. outline轮廓线在不同CSS样式下的表现

    outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色) ...

  8. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  9. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

随机推荐

  1. ubuntu安装到选择位置时闪退

    转自:http://tieba.baidu.com/p/3020839207

  2. scp失效问题

    1.症状 (1)登陆到服务器A(已在本机用ssh-add, ssh -A),scp 到服务器B时提示public key有问题: (2)/tmp/下没有ssh-XXX目录 2.原因 服务器A被pupp ...

  3. 【转】推荐一款Java反编译器,比较好用

    转自:http://www.blogjava.net/xmatthew/archive/2008/10/28/237203.html 推荐一款Java反编译器,也使用了挺久的了,感觉还是很好用,就拿出 ...

  4. php 301

    2013年7月1日 13:35:45 PHP在301跳转的时候,如果是跨域跳转,记着把要跳转到的URL添上"http://"

  5. 转数据库分库分表(sharding)系列(一) 拆分实施策略和示例演示

    本文原文连接: http://blog.csdn.net/bluishglc/article/details/7696085 ,转载请注明出处!本文着重介绍sharding切分策略,如果你对数据库sh ...

  6. CodeForces - 424B (贪心算法)

    Megacity Time Limit: 2000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Submit Sta ...

  7. Servlet过滤器和监听器

    1,Servlet过滤器 <filter> <filter-name>charset</filter-name> <filter-class>org.g ...

  8. EZ的间谍网络(codevs 4093)

    由于外国间谍的大量渗入,学校安全正处于高度的危机之中.YJY决定挺身而作出反抗.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美元,他们就愿意交出手 ...

  9. 扩展HtmlHelper方法

    1.在Model中新建类MyHtmlHelperExt /// <summary> /// 扩展HtmlHelper方法 /// 扩展方法三要素:静态类,静态方法,this关键字 /// ...

  10. Linux C 知识 char型数字转换为int型 int型 转换为Char

    前言 在九度oj做acm的时候,经常会遇到了char类型和int类型相互转化的问题,这里进行一下总结.今后,可能会多次更新博客,因为半年做了很多总结,但是都是保存在word文档上了,现在开始慢慢向CS ...